mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 16:22:57 +08:00
Merge branch 'dev'
This commit is contained in:
奔跑的面条
commit
1b2b319467
@ -1,7 +1,6 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview } from '@/utils'
|
||||
import { isPreview, colorGradientCustomMerge} from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -45,7 +45,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
||||
@ -14,7 +14,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview } from '@/utils'
|
||||
import { isPreview, colorGradientCustomMerge} from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -44,7 +44,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
||||
@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview } from '@/utils'
|
||||
import { isPreview, colorGradientCustomMerge } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -45,7 +45,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any) => {
|
||||
value.lineStyle.shadowColor = themeColor[2]
|
||||
value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
|
||||
|
||||
@ -10,7 +10,7 @@ import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { GridComponent } from 'echarts/components'
|
||||
import config from './config'
|
||||
import { isPreview, isString, isNumber } from '@/utils'
|
||||
import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
@ -44,7 +44,9 @@ watch(
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
// 背景颜色
|
||||
props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
|
||||
// 水球颜色
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import {
|
||||
Add as AddIcon,
|
||||
Close as CloseIcon,
|
||||
Remove as RemoveIcon,
|
||||
Resize as ResizeIcon,
|
||||
@ -52,6 +53,7 @@ import {
|
||||
ColorWand as ColorWandIcon,
|
||||
ArrowBack as ArrowBackIcon,
|
||||
ArrowForward as ArrowForwardIcon,
|
||||
ArrowDown as ArrowDownIcon,
|
||||
Planet as PawIcon,
|
||||
Search as SearchIcon,
|
||||
ChevronUpOutline as ChevronUpOutlineIcon,
|
||||
@ -101,6 +103,8 @@ import {
|
||||
} from '@vicons/carbon'
|
||||
|
||||
const ionicons5 = {
|
||||
// 新增
|
||||
AddIcon,
|
||||
// 帮助（问号）
|
||||
HelpOutlineIcon,
|
||||
// 添加
|
||||
@ -206,6 +210,8 @@ const ionicons5 = {
|
||||
ArrowBackIcon,
|
||||
// 前进
|
||||
ArrowForwardIcon,
|
||||
// 向下
|
||||
ArrowDownIcon,
|
||||
// 狗爪
|
||||
PawIcon,
|
||||
// 搜索（放大镜）
|
||||
|
||||
@ -57,6 +57,7 @@ import {
|
||||
NProgress,
|
||||
NDatePicker,
|
||||
NGrid,
|
||||
NGi,
|
||||
NGridItem,
|
||||
NList,
|
||||
NListItem,
|
||||
@ -160,6 +161,7 @@ const naive = create({
|
||||
NProgress,
|
||||
NDatePicker,
|
||||
NGrid,
|
||||
NGi,
|
||||
NGridItem,
|
||||
NList,
|
||||
NListItem,
|
||||
|
||||
@ -31,38 +31,20 @@ export const chartColors = {
|
||||
// 默认主题
|
||||
export const defaultTheme = 'dark'
|
||||
|
||||
// 主题色列表
|
||||
export type ChartColorsNameType = keyof typeof chartColorsName
|
||||
export const chartColorsName = {
|
||||
dark: '明亮',
|
||||
customed: '暗淡',
|
||||
macarons: '马卡龙',
|
||||
walden: '蓝绿',
|
||||
purplePassion: '深紫',
|
||||
vintage: '复古',
|
||||
chalk: '粉青',
|
||||
westeros: '灰粉',
|
||||
wonderland: '青草',
|
||||
essos: '橘红',
|
||||
shine: '深色',
|
||||
roma: '罗马红'
|
||||
// 默认展示的选择器颜色列表
|
||||
export const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa']
|
||||
|
||||
// 自定义颜色
|
||||
export type CustomColorsType = {
|
||||
id: string,
|
||||
name: string,
|
||||
color: string[]
|
||||
}
|
||||
|
||||
// 主题色列表
|
||||
export const chartColorsshow = {
|
||||
dark: 'linear-gradient(to right, #4992ff 0%, #7cffb2 100%)',
|
||||
customed: 'linear-gradient(to right, #5470c6 0%, #91cc75 100%)',
|
||||
macarons: 'linear-gradient(to right, #2ec7c9 0%, #b6a2de 100%)',
|
||||
walden: 'linear-gradient(to right, #3fb1e3 0%, #6be6c1 100%)',
|
||||
purplePassion: 'linear-gradient(to right, #9b8bba 0%, #e098c7 100%)',
|
||||
vintage: 'linear-gradient(to right, #d87c7c 0%, #919e8b 100%)',
|
||||
chalk: 'linear-gradient(to right, #fc97af 0%, #87f7cf 100%)',
|
||||
westeros: 'linear-gradient(to right, #516b91 0%, #edafda 100%)',
|
||||
wonderland: 'linear-gradient(to right, #4ea397 0%, #22c3aa 100%)',
|
||||
essos: 'linear-gradient(to right, #893448 0%, #d95850 100%)',
|
||||
shine: 'linear-gradient(to right, #c12e34 0%, #0098d9 100%)',
|
||||
roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)'
|
||||
}
|
||||
// 主题色列表, 自定义的颜色使用的是 UUID 作为标识，因为两者数据结构不一致
|
||||
export type ChartColorsNameType = keyof typeof chartColors
|
||||
|
||||
|
||||
// 渐变主题色列表（主色1、主色2、阴影、渐变1、渐变2）
|
||||
export const chartColorsSearch = {
|
||||
dark: ['#4992ff', '#7cffb2', 'rgba(68, 181, 226, 0.3)', 'rgba(73, 146, 255, 0.5)', 'rgba(124, 255, 178, 0.5)'],
|
||||
|
||||
@ -8,5 +8,6 @@
|
||||
"#d4a4eb",
|
||||
"#d2f5a6",
|
||||
"#76f2f2"
|
||||
]
|
||||
],
|
||||
"name": "粉青"
|
||||
}
|
||||
@ -9,5 +9,6 @@
|
||||
"#fc8452",
|
||||
"#9a60b4",
|
||||
"#ea7ccc"
|
||||
]
|
||||
],
|
||||
"name": "暗淡"
|
||||
}
|
||||
@ -9,5 +9,6 @@
|
||||
"#ff8a45",
|
||||
"#8d48e3",
|
||||
"#dd79ff"
|
||||
]
|
||||
],
|
||||
"name": "明亮"
|
||||
}
|
||||
@ -6,5 +6,6 @@
|
||||
"#ffb248",
|
||||
"#f2d643",
|
||||
"#ebdba4"
|
||||
]
|
||||
],
|
||||
"name": "橘红"
|
||||
}
|
||||
@ -20,5 +20,6 @@
|
||||
"#7eb00a",
|
||||
"#6f5553",
|
||||
"#c14089"
|
||||
]
|
||||
],
|
||||
"name": "马卡龙"
|
||||
}
|
||||
@ -6,5 +6,6 @@
|
||||
"#71669e",
|
||||
"#cc70af",
|
||||
"#7cb4cc"
|
||||
]
|
||||
],
|
||||
"name": "深紫"
|
||||
}
|
||||
@ -20,5 +20,6 @@
|
||||
"#3cb371",
|
||||
"#d5b158",
|
||||
"#38b6b6"
|
||||
]
|
||||
],
|
||||
"name": "罗马红"
|
||||
}
|
||||
@ -8,5 +8,6 @@
|
||||
"#339ca8",
|
||||
"#cda819",
|
||||
"#32a487"
|
||||
]
|
||||
],
|
||||
"name": "深色"
|
||||
}
|
||||
@ -10,5 +10,6 @@
|
||||
"#cc7e63",
|
||||
"#724e58",
|
||||
"#4b565b"
|
||||
]
|
||||
],
|
||||
"name": "复古"
|
||||
}
|
||||
@ -6,5 +6,6 @@
|
||||
"#a0a7e6",
|
||||
"#c4ebad",
|
||||
"#96dee8"
|
||||
]
|
||||
],
|
||||
"name": "蓝绿"
|
||||
}
|
||||
@ -6,5 +6,6 @@
|
||||
"#93b7e3",
|
||||
"#a5e7f0",
|
||||
"#cbb0e3"
|
||||
]
|
||||
],
|
||||
"name": "灰粉"
|
||||
}
|
||||
@ -6,5 +6,6 @@
|
||||
"#d0648a",
|
||||
"#f58db2",
|
||||
"#f2b3c9"
|
||||
]
|
||||
],
|
||||
"name": "青草"
|
||||
}
|
||||
@ -10,7 +10,7 @@ import {
|
||||
RequestParamsObjType
|
||||
} from '@/enums/httpEnum'
|
||||
import { PreviewScaleEnum } from '@/enums/styleEnum'
|
||||
import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import type { ChartColorsNameType, CustomColorsType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
// 编辑画布属性
|
||||
export enum EditCanvasTypeEnum {
|
||||
@ -52,6 +52,7 @@ export enum EditCanvasConfigEnum {
|
||||
WIDTH = 'width',
|
||||
HEIGHT = 'height',
|
||||
CHART_THEME_COLOR = 'chartThemeColor',
|
||||
CHART_CUSTOM_THEME_COLOR_INFO = 'chartCustomThemeColorInfo',
|
||||
CHART_THEME_SETTING = 'chartThemeSetting',
|
||||
BACKGROUND = 'background',
|
||||
BACKGROUND_IMAGE = 'backgroundImage',
|
||||
@ -87,9 +88,12 @@ export interface EditCanvasConfigType {
|
||||
[EditCanvasConfigEnum.HEIGHT]: number
|
||||
// 背景色
|
||||
[EditCanvasConfigEnum.BACKGROUND]?: string
|
||||
// 背景图片
|
||||
[EditCanvasConfigEnum.BACKGROUND_IMAGE]?: string | null
|
||||
// 图表主题颜色
|
||||
[EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType
|
||||
// 自定义图表主题颜色
|
||||
[EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO]?: CustomColorsType[]
|
||||
// 图表全局配置
|
||||
[EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType
|
||||
// 图表主题颜色
|
||||
|
||||
@ -108,6 +108,8 @@ export const useChartEditStore = defineStore({
|
||||
selectColor: true,
|
||||
// chart 主题色
|
||||
chartThemeColor: defaultTheme || 'dark',
|
||||
// 自定义颜色列表
|
||||
chartCustomThemeColorInfo: undefined,
|
||||
// 全局配置
|
||||
chartThemeSetting: globalThemeJson,
|
||||
// 适配方式
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
@mixin deep() {
|
||||
:deep(*) {
|
||||
:deep() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@ import Color from 'color'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { PickCreateComponentType } from '@/packages/index.d'
|
||||
import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { chartColors, chartColorsSearch, CustomColorsType } from '@/settings/chartThemes/index'
|
||||
|
||||
type AttrType = PickCreateComponentType<'attr'>
|
||||
type StylesType = PickCreateComponentType<'styles'>
|
||||
@ -86,6 +87,21 @@ export function darken(color: string, concentration: number) {
|
||||
return Color(color).darken(concentration).toString()
|
||||
}
|
||||
|
||||
/**
|
||||
* * hsl 转成16进制
|
||||
* @param hsl
|
||||
* @returns
|
||||
*/
|
||||
export function hslToHexa(hslString: string): string {
|
||||
const color = Color(hslString)
|
||||
return color.hexa()
|
||||
}
|
||||
|
||||
export function hslToHex(hslString: string): string {
|
||||
const color = Color(hslString)
|
||||
return color.hex()
|
||||
}
|
||||
|
||||
/**
|
||||
* * 修改主题色
|
||||
* @param themeName 主题名称
|
||||
@ -100,3 +116,48 @@ export const setHtmlTheme = (themeName?: string) => {
|
||||
const designStore = useDesignStore()
|
||||
e.setAttribute('data-theme', designStore.themeName)
|
||||
}
|
||||
|
||||
/**
|
||||
* * 合并基础颜色和自定义颜色
|
||||
* @param chartDefaultColors
|
||||
* @param customColor
|
||||
* @returns
|
||||
*/
|
||||
export const colorCustomMerge = (customColor?: CustomColorsType[]) => {
|
||||
type FormateCustomColorType = {
|
||||
[T: string]: {
|
||||
color: string[]
|
||||
name: string
|
||||
}
|
||||
}
|
||||
const formateCustomColor: FormateCustomColorType = {}
|
||||
customColor?.forEach(item => {
|
||||
formateCustomColor[item.id] = {
|
||||
color: item.color,
|
||||
name: item.name
|
||||
}
|
||||
})
|
||||
return { ...formateCustomColor, ...chartColors }
|
||||
}
|
||||
|
||||
/**
|
||||
* * 合并基础渐变颜色和自定义渐变颜色
|
||||
* @param customColor
|
||||
*/
|
||||
export const colorGradientCustomMerge = (customColor?: CustomColorsType[]) => {
|
||||
type FormateGradientCustomColorType = {
|
||||
[T: string]: string[]
|
||||
}
|
||||
const formateGradientCustomColor: FormateGradientCustomColorType = {}
|
||||
customColor?.forEach(item => {
|
||||
formateGradientCustomColor[item.id] = [
|
||||
item.color[0],
|
||||
item.color[1],
|
||||
fade(item.color[0], 0.3),
|
||||
fade(item.color[0], 0.5),
|
||||
fade(item.color[1], 0.5)
|
||||
]
|
||||
})
|
||||
|
||||
return { ...formateGradientCustomColor, ...chartColorsSearch }
|
||||
}
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
<template>
|
||||
<div class="go-chart-theme-color">
|
||||
<n-card class="card-box" size="small" hoverable embedded @click="createColorHandle">
|
||||
<n-text class="go-flex-items-center">
|
||||
<span>自定义颜色</span>
|
||||
<n-icon size="16">
|
||||
<add-icon></add-icon>
|
||||
</n-icon>
|
||||
</n-text>
|
||||
</n-card>
|
||||
|
||||
<n-card
|
||||
v-for="(value, key) in chartColors"
|
||||
v-for="(value, key) in comChartColors"
|
||||
:key="key"
|
||||
class="card-box"
|
||||
:class="{ selected: key === selectName }"
|
||||
@ -11,7 +20,7 @@
|
||||
@click="selectTheme(key)"
|
||||
>
|
||||
<div class="go-flex-items-center">
|
||||
<n-text>{{ chartColorsName[key] }}</n-text>
|
||||
<n-ellipsis style="text-align: left; width: 60px">{{ value.name }} </n-ellipsis>
|
||||
<span
|
||||
class="theme-color-item"
|
||||
v-for="colorItem in fetchShowColors(value.color)"
|
||||
@ -19,33 +28,43 @@
|
||||
:style="{ backgroundColor: colorItem }"
|
||||
></span>
|
||||
</div>
|
||||
<div
|
||||
class="theme-bottom"
|
||||
:style="{ backgroundImage: chartColorsshow[key] }"
|
||||
></div>
|
||||
<div class="theme-bottom" :style="{ backgroundImage: colorBackgroundImage(value) }"></div>
|
||||
</n-card>
|
||||
<!-- 自定义颜色 modal -->
|
||||
<create-color v-model:modelShow="createColorModelShow"></create-color>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import {
|
||||
chartColors,
|
||||
chartColorsName,
|
||||
chartColorsshow,
|
||||
ChartColorsNameType
|
||||
} from '@/settings/chartThemes/index'
|
||||
import { chartColors, ChartColorsNameType } from '@/settings/chartThemes/index'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { loadAsyncComponent, colorCustomMerge } from '@/utils'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
const { SquareIcon } = icon.ionicons5
|
||||
type FormateCustomColorType = {
|
||||
[T: string]: {
|
||||
color: string[]
|
||||
name: string
|
||||
}
|
||||
}
|
||||
|
||||
const CreateColor = loadAsyncComponent(() => import('../CreateColor/index.vue'))
|
||||
|
||||
const { SquareIcon, AddIcon } = icon.ionicons5
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const createColorModelShow = ref(false)
|
||||
|
||||
// 合并默认颜色和自定义颜色
|
||||
const comChartColors = computed(() => {
|
||||
return colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
|
||||
})
|
||||
|
||||
// 颜色
|
||||
const themeColor = computed(() => {
|
||||
@ -57,6 +76,16 @@ const selectName = computed(() => {
|
||||
return chartEditStore.getEditCanvasConfig.chartThemeColor
|
||||
})
|
||||
|
||||
// 创建颜色
|
||||
const createColorHandle = () => {
|
||||
createColorModelShow.value = true
|
||||
}
|
||||
|
||||
// 底色
|
||||
const colorBackgroundImage = (item: { color: string[] }) => {
|
||||
return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`
|
||||
}
|
||||
|
||||
// 获取用来展示的色号
|
||||
const fetchShowColors = (colors: Array<string>) => {
|
||||
return cloneDeep(colors).splice(0, 6)
|
||||
@ -69,36 +98,34 @@ const selectTheme = (theme: ChartColorsNameType) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(chart-theme-color) {
|
||||
padding-top: 20px;
|
||||
$radius: 10px;
|
||||
$itemRadius: 6px;
|
||||
|
||||
@include go('chart-theme-color') {
|
||||
.card-box {
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
padding: 0;
|
||||
@include fetch-bg-color('background-color4-shallow');
|
||||
border-radius: 23px;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
@include deep() {
|
||||
.n-card__content {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid v-bind('themeColor');
|
||||
border: 2px solid v-bind('themeColor');
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.go-flex-items-center {
|
||||
justify-content: space-between;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.theme-color-item {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border-radius: $itemRadius;
|
||||
}
|
||||
.theme-bottom {
|
||||
position: absolute;
|
||||
@ -106,7 +133,6 @@ const selectTheme = (theme: ChartColorsNameType) => {
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-image: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<n-modal class="go-chart-create-color" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 720px">
|
||||
<template #header></template>
|
||||
<template #header-extra> </template>
|
||||
<div class="create-content">
|
||||
<div class="create-color-setting-box">
|
||||
<create-color-render
|
||||
v-if="selectColorId"
|
||||
:selectColor="selectColor.selectInfo"
|
||||
@updateColor="updateColorHandle"
|
||||
></create-color-render>
|
||||
<!-- 无数据 -->
|
||||
<div v-else class="no-data go-flex-center">
|
||||
<img :src="noData" alt="暂无数据" />
|
||||
<n-text :depth="3">暂未选择自定义颜色</n-text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-list-box">
|
||||
<n-timeline class="pond-item-timeline" style="width: 20px">
|
||||
<n-timeline-item type="info"> </n-timeline-item>
|
||||
<n-timeline-item type="success"></n-timeline-item>
|
||||
</n-timeline>
|
||||
<div class="color-list">
|
||||
<n-space>
|
||||
<!-- 新增 -->
|
||||
<n-button
|
||||
class="create-btn"
|
||||
:class="{ 'is-full': !!!selectColorId }"
|
||||
type="primary"
|
||||
:ghost="!!!selectColorId"
|
||||
:secondary="!!selectColorId"
|
||||
@click="createColor"
|
||||
>
|
||||
<span> 创建 </span>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<duplicate-outline-icon></duplicate-outline-icon>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-badge v-if="selectColorId" :show="updateColor !== undefined" dot>
|
||||
<n-button class="create-btn" type="info" secondary @click="saveHandle">
|
||||
<span> 应用数据 </span>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<arrow-down-icon></arrow-down-icon>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-badge>
|
||||
</n-space>
|
||||
<n-divider style="margin: 10px 0"></n-divider>
|
||||
<n-text v-if="!selectColorId" class="not-data-text" :depth="3">
|
||||
暂无自定义颜色，
|
||||
<n-a @click="createColor">立即创建</n-a>
|
||||
</n-text>
|
||||
<!-- 列表 -->
|
||||
<div class="color-card-box" v-for="(item, index) in colorList" :key="index">
|
||||
<n-card
|
||||
class="color-card"
|
||||
:class="{ selected: item.id === selectColorId }"
|
||||
size="small"
|
||||
hoverable
|
||||
embedded
|
||||
@click="selectHandle(item)"
|
||||
>
|
||||
<div class="go-flex-items-center">
|
||||
<n-ellipsis style="text-align: left; width: 70px">{{ item.name }} </n-ellipsis>
|
||||
<span
|
||||
class="theme-color-item"
|
||||
v-for="(colorItem, index) in item.color"
|
||||
:key="index"
|
||||
:style="{ backgroundColor: colorItem }"
|
||||
></span>
|
||||
</div>
|
||||
<div class="theme-bottom" :style="{ backgroundImage: colorBackgroundImage(item) }"></div>
|
||||
</n-card>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button text :disabled="item.id === selectThemeColor" @click="deleteHandle(index)">
|
||||
<n-icon class="go-ml-1 go-cursor-pointer" size="16" :depth="3">
|
||||
<trash-icon></trash-icon>
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</template>
|
||||
删除自定义颜色
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 -->
|
||||
<template #action>
|
||||
<n-space justify="end">
|
||||
<n-button @click="closeHandle">操作完成</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed, reactive, nextTick, onMounted } from 'vue'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import noData from '@/assets/images/canvas/noData.png'
|
||||
import { getUUID, goDialog } from '@/utils'
|
||||
import { icon } from '@/plugins'
|
||||
import { UvIndex } from '@vicons/carbon'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { CreateColorRender } from '../CreateColorRender/index'
|
||||
|
||||
const props = defineProps({
|
||||
modelShow: Boolean
|
||||
})
|
||||
const emit = defineEmits(['update:modelShow', 'editSaveHandle'])
|
||||
const { DuplicateOutlineIcon, TrashIcon, ArrowDownIcon } = icon.ionicons5
|
||||
|
||||
type ColorType = {
|
||||
id: string
|
||||
name: string
|
||||
color: string[]
|
||||
}
|
||||
|
||||
// 默认颜色组
|
||||
const defaultColor: ColorType = {
|
||||
id: getUUID(),
|
||||
name: '未命名',
|
||||
color: ['#6ae5bb', '#69e3de', '#5ac5ee', '#5ac4ee', '#4498ec', '#3c7ddf']
|
||||
}
|
||||
const chartEditStore = useChartEditStore()
|
||||
const modelShowRef = ref(false)
|
||||
// 颜色列表
|
||||
let colorList = reactive<Array<ColorType>>(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo || [])
|
||||
// 子组件更新过的数据
|
||||
const updateColor = ref<ColorType | undefined>(undefined)
|
||||
// 所选颜色
|
||||
const selectColor = reactive<{
|
||||
selectInfo: ColorType | undefined
|
||||
}>({
|
||||
selectInfo: colorList[0]
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelShow,
|
||||
newValue => {
|
||||
modelShowRef.value = newValue
|
||||
if (newValue) {
|
||||
// 默认选中
|
||||
if (colorList.length) selectColor.selectInfo = colorList[0]
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 当前选中的 ID
|
||||
const selectColorId = computed(() => selectColor?.selectInfo?.id)
|
||||
|
||||
// 全局选择的主题
|
||||
const selectThemeColor = computed(() => chartEditStore.getEditCanvasConfig.chartThemeColor)
|
||||
|
||||
// 选择
|
||||
const selectHandle = (item: ColorType) => {
|
||||
if (item.id === selectColorId.value) return
|
||||
if (updateColor.value !== undefined) {
|
||||
goDialog({
|
||||
message: '当前有变动未保存，是否直接放弃修改？',
|
||||
onPositiveCallback: () => {
|
||||
updateColor.value = undefined
|
||||
selectColor.selectInfo = item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
selectColor.selectInfo = item
|
||||
}
|
||||
}
|
||||
|
||||
// 创建
|
||||
const createColor = () => {
|
||||
const positiveHandle = () => {
|
||||
const newData = { ...cloneDeep(defaultColor), id: getUUID() }
|
||||
selectColor.selectInfo = newData
|
||||
colorList.push(newData)
|
||||
selectHandle(newData)
|
||||
updateColor.value = newData
|
||||
saveHandle(false)
|
||||
}
|
||||
if (updateColor.value !== undefined) {
|
||||
goDialog({
|
||||
message: '当前有变动未保存，是否直接放弃修改？',
|
||||
onPositiveCallback: () => {
|
||||
updateColor.value = undefined
|
||||
positiveHandle()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
positiveHandle()
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
const deleteHandle = (index: number) => {
|
||||
const positiveHandle = () => {
|
||||
colorList.splice(index, 1)
|
||||
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
|
||||
nextTick(() => {
|
||||
if (colorList.length) {
|
||||
selectHandle(colorList[index - 1 > -1 ? index - 1 : index])
|
||||
} else {
|
||||
// 已清空
|
||||
selectColor.selectInfo = undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
if (updateColor.value !== undefined) {
|
||||
goDialog({
|
||||
message: '当前有变动未保存，是否直接放弃修改？',
|
||||
onPositiveCallback: () => {
|
||||
updateColor.value = undefined
|
||||
positiveHandle()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
goDialog({
|
||||
message: `是否删除此颜色？`,
|
||||
onPositiveCallback: () => {
|
||||
positiveHandle()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 存储更新数据的值
|
||||
const updateColorHandle = (newColor: ColorType) => {
|
||||
updateColor.value = newColor
|
||||
}
|
||||
|
||||
// 保存数据
|
||||
const saveHandle = (onMessage = true) => {
|
||||
if (!updateColor.value) return
|
||||
const index = colorList.findIndex(item => item.id === updateColor.value?.id)
|
||||
if (index !== -1) {
|
||||
onMessage && window.$message.success('数据应用成功！')
|
||||
const updateColorPrefix = cloneDeep({ ...updateColor.value, name: updateColor.value.name || '未定义' })
|
||||
colorList.splice(index, 1, updateColorPrefix)
|
||||
updateColor.value = undefined
|
||||
const selectTheme = chartEditStore.getEditCanvasConfig.chartThemeColor
|
||||
// 变换主题强制渐变色更新
|
||||
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, 'dark')
|
||||
// 存储到全局数据中
|
||||
nextTick(() => {
|
||||
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
|
||||
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, selectTheme)
|
||||
})
|
||||
} else {
|
||||
window.$message.error('数据应用失败！')
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭
|
||||
const closeHandle = () => {
|
||||
const positiveHandle = () => {
|
||||
updateColor.value = undefined
|
||||
selectColor.selectInfo = undefined
|
||||
emit('update:modelShow', false)
|
||||
}
|
||||
|
||||
if (updateColor.value !== undefined) {
|
||||
goDialog({
|
||||
message: '当前有变动未保存，是否直接放弃修改？',
|
||||
onPositiveCallback: () => {
|
||||
positiveHandle()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
positiveHandle()
|
||||
}
|
||||
}
|
||||
|
||||
// 底色
|
||||
const colorBackgroundImage = (item: ColorType) => {
|
||||
return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$height: 600px;
|
||||
$listWidth: 280px;
|
||||
$color-radius: 8px;
|
||||
$color-item-radius: 4px;
|
||||
|
||||
@include go('chart-create-color') {
|
||||
.create-content {
|
||||
display: flex;
|
||||
/* 左侧 */
|
||||
.create-color-setting-box {
|
||||
flex: 1;
|
||||
.no-data {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 列表 */
|
||||
.color-list-box {
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
margin-right: 5px;
|
||||
.pond-item-timeline > .n-timeline-item {
|
||||
&:first-child {
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
.color-list {
|
||||
width: $listWidth;
|
||||
position: relative;
|
||||
padding-right: 8px;
|
||||
.create-btn {
|
||||
width: 133px;
|
||||
&.is-full {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
.not-data-text {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.color-card-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 15px;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.color-card {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: $color-radius;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0);
|
||||
@include fetch-bg-color('background-color4-shallow');
|
||||
|
||||
@include deep() {
|
||||
& > .n-card__content {
|
||||
padding: 7px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
border: 2px solid var(--n-color-target);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
.go-flex-items-center {
|
||||
justify-content: space-between;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.theme-color-item {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: $color-item-radius;
|
||||
}
|
||||
.theme-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-card.n-modal,
|
||||
.n-card {
|
||||
@extend .go-background-filter;
|
||||
}
|
||||
.n-card-shallow {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
@include deep() {
|
||||
& > .n-card__content {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
import CreateColorRender from './index.vue'
|
||||
|
||||
export { CreateColorRender }
|
||||
@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="create-color-setting" v-if="editColor">
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true">
|
||||
<n-space justify="space-between">
|
||||
<!-- 名称 -->
|
||||
<n-input-group>
|
||||
<n-input-group-label>名称:</n-input-group-label>
|
||||
<n-input
|
||||
class="create-color-name"
|
||||
v-model:value.trim="editColor.name"
|
||||
maxlength="8"
|
||||
show-count
|
||||
clearable
|
||||
@change="titleChangeHandle"
|
||||
/>
|
||||
</n-input-group>
|
||||
<n-tag type="warning">底部图表仅展示 7 条数据</n-tag>
|
||||
</n-space>
|
||||
<!-- 颜色 -->
|
||||
<n-scrollbar style="max-height: 132px">
|
||||
<div class="color-list-box go-mt-3" :x-gap="12" :y-gap="12" :cols="4">
|
||||
<div class="color-list-item" v-for="(item, index) in editColor.color" :key="index">
|
||||
<div class="go-flex-items-center" :class="{ select: index === targetColor.index }">
|
||||
<n-color-picker
|
||||
style="width: 95px"
|
||||
v-model:value="editColor.color[index]"
|
||||
:show-preview="true"
|
||||
:modes="['hex']"
|
||||
@complete="completeHandle($event, index)"
|
||||
@update:show="selectHandle(item, index)"
|
||||
/>
|
||||
<div v-show="index > 5">
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon class="go-ml-1 go-cursor-pointer" size="16" :depth="3" @click="deleteColor(index)">
|
||||
<trash-icon></trash-icon>
|
||||
</n-icon>
|
||||
</template>
|
||||
删除颜色
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<n-button type="primary" secondary @click="addColor">
|
||||
<div class="go-flex-items-center">
|
||||
<span class="go-mr-4">添加</span>
|
||||
<n-icon size="16">
|
||||
<add-icon></add-icon>
|
||||
</n-icon>
|
||||
</div>
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
</n-card>
|
||||
|
||||
<!-- 扩展色 -->
|
||||
<div class="expend-color-box">
|
||||
<n-card class="go-mt-3 expend-color" :bordered="false" role="dialog" size="small" aria-modal="true">
|
||||
<n-text>默认扩展色：</n-text>
|
||||
<n-divider style="margin: 10px 0"></n-divider>
|
||||
<n-space :size="[4, 0]" justify="center">
|
||||
<div
|
||||
class="color-computed-item"
|
||||
v-for="(item, index) in expandColorList.default"
|
||||
:key="index"
|
||||
@click="selectExpandColor(item, false)"
|
||||
>
|
||||
<div class="n-color-picker-checkboard"></div>
|
||||
<div :style="getRenderBackgroundColor(item)"></div>
|
||||
</div>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<n-card class="go-mt-3 expend-color" :bordered="false" role="dialog" size="small" aria-modal="true">
|
||||
<n-text>透明扩展色：</n-text>
|
||||
<n-divider style="margin: 10px 0"></n-divider>
|
||||
<n-space :size="[4, 0]" justify="center">
|
||||
<div
|
||||
class="color-computed-item"
|
||||
v-for="(item, index) in expandColorList.fade"
|
||||
:key="index"
|
||||
@click="selectExpandColor(item, true)"
|
||||
>
|
||||
<div class="n-color-picker-checkboard"></div>
|
||||
<div :style="getRenderBackgroundColor(item)"></div>
|
||||
</div>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
|
||||
<!-- 展示图表 -->
|
||||
<create-color-render-chart :color="cloneDeep(editColor.color).splice(0, 7)"></create-color-render-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, ref, watch, computed, reactive, nextTick } from 'vue'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { darken, lighten, fade, hslToHex, hslToHexa, loadAsyncComponent } from '@/utils'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
type ColorType = {
|
||||
id: string
|
||||
name: string
|
||||
color: string[]
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
selectColor: Object as PropType<ColorType>
|
||||
})
|
||||
|
||||
const emit = defineEmits(['updateColor'])
|
||||
|
||||
const { AddIcon, TrashIcon } = icon.ionicons5
|
||||
const CreateColorRenderChart = loadAsyncComponent(() => import('../CreateColorRenderChart/index.vue'))
|
||||
|
||||
// 拷贝的一份数据
|
||||
const editColor = ref<ColorType | undefined>()
|
||||
// 目标颜色
|
||||
const targetColor = reactive<{
|
||||
index: number
|
||||
color?: string
|
||||
}>({
|
||||
// -1 表示无选中元素
|
||||
index: -1,
|
||||
color: ''
|
||||
})
|
||||
|
||||
// 监听值
|
||||
watch(
|
||||
() => props.selectColor?.id,
|
||||
() => {
|
||||
editColor.value = cloneDeep(props.selectColor)
|
||||
targetColor.index = 0
|
||||
targetColor.color = editColor.value?.color[0]
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
// 扩展色
|
||||
const expandColorList = computed(() => {
|
||||
return computedColorList(targetColor.color)
|
||||
})
|
||||
|
||||
// 计算背景色
|
||||
const computedColorList = (color?: string) => {
|
||||
if (!color)
|
||||
return {
|
||||
default: [],
|
||||
fade: []
|
||||
}
|
||||
const num: number = 36
|
||||
const comDarkenArr: string[] = []
|
||||
const comLightenArr: string[] = []
|
||||
const comDarkenFadeArr: string[] = []
|
||||
|
||||
for (let i = 0; i < num; i++) {
|
||||
comLightenArr.unshift(lighten(color, (1 / 100) * (i + 1)))
|
||||
comDarkenArr.push(darken(color, (3.5 / 100) * (i + 1)))
|
||||
}
|
||||
|
||||
// 透明
|
||||
comDarkenArr.forEach((item, i) => {
|
||||
comDarkenFadeArr.unshift(fade(item, (1 / 100) * (i + 1)))
|
||||
})
|
||||
|
||||
return {
|
||||
default: [
|
||||
...comLightenArr.reverse().splice(0, parseInt(`${num / 2}`) - 9),
|
||||
...comDarkenArr.splice(0, parseInt(`${num / 2}`))
|
||||
],
|
||||
fade: comDarkenFadeArr.reverse().splice(0, 27)
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染背景色
|
||||
const getRenderBackgroundColor = (color?: string) => {
|
||||
return {
|
||||
backgroundColor: color
|
||||
}
|
||||
}
|
||||
|
||||
// 点击颜色
|
||||
const selectHandle = (color: string, index: number) => {
|
||||
targetColor.color = color
|
||||
targetColor.index = index
|
||||
}
|
||||
|
||||
// 顶部改变颜色
|
||||
const completeHandle = (color?: string, index?: number) => {
|
||||
color && (targetColor.color = color)
|
||||
index && (targetColor.index = index)
|
||||
nextTick(() => {
|
||||
emit('updateColor', editColor.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 选择扩展色
|
||||
const selectExpandColor = (color: string, isHexa: boolean) => {
|
||||
const hexColor = isHexa ? hslToHexa(color) : hslToHex(color)
|
||||
editColor.value && (editColor.value.color[targetColor.index] = hexColor)
|
||||
nextTick(() => {
|
||||
emit('updateColor', editColor.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 新增颜色
|
||||
const addColor = () => {
|
||||
const lastData = editColor.value?.color[editColor.value?.color.length - 1] || '#2c2c31'
|
||||
editColor.value?.color.push(lastData)
|
||||
nextTick(() => {
|
||||
emit('updateColor', editColor.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 删除颜色
|
||||
const deleteColor = (index: number) => {
|
||||
editColor.value?.color.splice(index, 1)
|
||||
if (index === targetColor.index) {
|
||||
completeHandle(editColor.value?.color[index - 1], index - 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 修改名称
|
||||
const titleChangeHandle = () => {
|
||||
nextTick(() => {
|
||||
emit('updateColor', editColor.value)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.create-color-setting {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding-right: 10px;
|
||||
.create-color-name {
|
||||
width: 200px;
|
||||
}
|
||||
.color-list-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 8px;
|
||||
.color-list-item {
|
||||
width: calc(100% / 4);
|
||||
.select {
|
||||
.n-color-picker {
|
||||
border: 2px solid v-bind('targetColor.color');
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.expend-color-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.expend-color {
|
||||
width: calc(50% - 5px);
|
||||
.color-computed-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
& div {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,47 @@
|
||||
import { echartOptionProfixHandle } from '@/packages/public'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
const seriesHandle = (color: string[]) => {
|
||||
const numHandle = (numsi: number, i: number) => parseInt(`${numsi * Math.random()}`, 10) * 2
|
||||
const nums = [260, 251, 200, 334, 366, 256, 253]
|
||||
|
||||
return color.map((item, index) => ({
|
||||
name: `data${index + 1}`,
|
||||
type: 'bar',
|
||||
data: nums.map((numsItem, numsi) => numHandle(numsItem, index))
|
||||
}))
|
||||
}
|
||||
|
||||
export const option = (color: string[]) => {
|
||||
return echartOptionProfixHandle(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
showContent: false,
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: color.map((e, i) => `data${i + 1}`),
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
series: seriesHandle(color || [])
|
||||
},
|
||||
includes
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
import CreateColorRenderChart from './index.vue'
|
||||
|
||||
export { CreateColorRenderChart }
|
||||
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<n-space>
|
||||
<n-card v-if="barOption" class="go-mt-3" :bordered="false" role="dialog" size="small" aria-modal="true">
|
||||
<n-tabs type="segment" size="small" animated>
|
||||
<n-tab-pane name="柱状图" tab="柱状图">
|
||||
<v-chart
|
||||
ref="vChartRefBar"
|
||||
:theme="{ color }"
|
||||
:option="barOption"
|
||||
:manual-update="true"
|
||||
autoresize
|
||||
:style="chartStyle"
|
||||
></v-chart>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="折线图" tab="折线图">
|
||||
<v-chart
|
||||
ref="vChartRefLine"
|
||||
:theme="{ color }"
|
||||
:option="lineOption"
|
||||
:manual-update="true"
|
||||
autoresize
|
||||
:style="chartStyle"
|
||||
></v-chart>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { BarChart, LineChart } from 'echarts/charts'
|
||||
import { use } from 'echarts/core'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { option as barOptions } from './barOptions'
|
||||
import { option as lineOptions } from './lineOptions'
|
||||
|
||||
const props = defineProps({
|
||||
color: {
|
||||
type: Array as PropType<string[]>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const barOption = ref()
|
||||
const lineOption = ref()
|
||||
|
||||
const chartStyle = {
|
||||
width: '528px',
|
||||
height: '200px'
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.color,
|
||||
(newData: string[]) => {
|
||||
barOption.value = barOptions(newData)
|
||||
lineOption.value = lineOptions(newData)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@ -0,0 +1,72 @@
|
||||
import { echartOptionProfixHandle } from '@/packages/public'
|
||||
import { graphic } from 'echarts/core'
|
||||
import { fade, hslToHex } from '@/utils'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
const seriesHandle = (color: string[]) => {
|
||||
const numHandle = (numsi: number, i: number) => parseInt(`${numsi * Math.random()}`, 10) * 2
|
||||
const nums = [130, 251, 200, 334, 366, 456, 223]
|
||||
|
||||
return color.map((item, index) => ({
|
||||
name: `data${index + 1}`,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: item
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: item
|
||||
}
|
||||
])
|
||||
},
|
||||
showSymbol: false,
|
||||
data: nums.reverse().map((numsItem, numsi) => numHandle(numsItem, index))
|
||||
}))
|
||||
}
|
||||
|
||||
export const option = (color: string[]) => {
|
||||
return echartOptionProfixHandle(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
showContent: false,
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: color.map((e, i) => `data${i + 1}`),
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
series: seriesHandle(color || [])
|
||||
},
|
||||
includes
|
||||
)
|
||||
}
|
||||
@ -22,7 +22,7 @@
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<n-card class="upload-box">
|
||||
<div class="upload-box">
|
||||
<n-upload
|
||||
v-model:file-list="uploadFileListRef"
|
||||
:show-file-list="false"
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
</n-upload-dragger>
|
||||
</n-upload>
|
||||
</n-card>
|
||||
</div>
|
||||
<n-space vertical :size="12">
|
||||
<n-space>
|
||||
<n-text>背景颜色</n-text>
|
||||
@ -128,6 +128,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, watch } from 'vue'
|
||||
import { backgroundImageSize } from '@/settings/designSetting'
|
||||
import { swatchesColors } from '@/settings/chartThemes/index'
|
||||
import { FileTypeEnum } from '@/enums/fileTypeEnum'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
@ -162,9 +163,6 @@ const selectColorOptions = [
|
||||
}
|
||||
]
|
||||
|
||||
// 默认展示颜色列表
|
||||
const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa']
|
||||
|
||||
const globalTabList = [
|
||||
{
|
||||
key: 'ChartTheme',
|
||||
@ -294,13 +292,10 @@ $uploadHeight: 193px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
@include deep() {
|
||||
.n-card__content {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.n-upload-dragger {
|
||||
padding: 5px;
|
||||
width: $uploadWidth;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
.upload-show {
|
||||
@ -331,8 +326,8 @@ $uploadHeight: 193px;
|
||||
padding-right: 2.25em;
|
||||
}
|
||||
.select-preview-icon {
|
||||
padding-right: .68em;
|
||||
padding-left: .68em;
|
||||
padding-right: 0.68em;
|
||||
padding-left: 0.68em;
|
||||
}
|
||||
.tabs-box {
|
||||
margin-top: 20px;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="go-chart-data-pond-list">
|
||||
<n-timeline style="width: 20px">
|
||||
<n-timeline class="pond-item-timeline" style="width: 20px">
|
||||
<n-timeline-item type="info"> </n-timeline-item>
|
||||
<n-timeline-item type="success"></n-timeline-item>
|
||||
</n-timeline>
|
||||
@ -115,13 +115,11 @@ $textSize: 10px;
|
||||
padding-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
display: flex;
|
||||
@include deep() {
|
||||
.n-timeline > .n-timeline-item {
|
||||
.pond-item-timeline > .n-timeline-item {
|
||||
&:first-child {
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pond-item-box {
|
||||
width: $listWidth;
|
||||
position: relative;
|
||||
|
||||
@ -56,7 +56,7 @@ import { MenuEnum } from '@/enums/editPageEnum'
|
||||
import { chartColors } from '@/settings/chartThemes/index'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
|
||||
import { useMouseHandle } from '../../hooks/useDrag.hook'
|
||||
@ -117,8 +117,8 @@ const optionsHandle = (
|
||||
|
||||
// 配置项
|
||||
const themeColor = computed(() => {
|
||||
const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor
|
||||
return chartColors[chartThemeColor]
|
||||
const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
|
||||
return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
|
||||
})
|
||||
|
||||
// 主题色
|
||||
|
||||
@ -55,7 +55,7 @@ const rangeModelStyle = computed(() => {
|
||||
position: relative;
|
||||
transform-origin: left top;
|
||||
background-size: cover;
|
||||
border-radius: 20px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
@include fetch-border-color('hover-border-color');
|
||||
@include fetch-bg-color('background-color2');
|
||||
|
||||
@ -87,7 +87,7 @@ import { onMounted, computed } from 'vue'
|
||||
import { chartColors } from '@/settings/chartThemes/index'
|
||||
import { MenuEnum } from '@/enums/editPageEnum'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
|
||||
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
@ -146,8 +146,8 @@ const themeSetting = computed(() => {
|
||||
|
||||
// 配置项
|
||||
const themeColor = computed(() => {
|
||||
const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor
|
||||
return chartColors[chartThemeColor]
|
||||
const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
|
||||
return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
|
||||
})
|
||||
|
||||
// 是否展示渲染
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</n-icon>
|
||||
<n-text @click="handleFocus">
|
||||
工作空间 -
|
||||
<n-button v-show="!focus" secondary round size="tiny">
|
||||
<n-button v-show="!focus" secondary size="tiny">
|
||||
<span class="title">
|
||||
{{ comTitle }}
|
||||
</span>
|
||||
@ -19,7 +19,6 @@
|
||||
type="text"
|
||||
maxlength="16"
|
||||
show-count
|
||||
round
|
||||
placeholder="请输入项目名称"
|
||||
v-model:value.trim="title"
|
||||
@keyup.enter="handleBlur"
|
||||
@ -74,6 +73,8 @@ const handleBlur = () => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -43,12 +43,14 @@ import { ChartEditStorageType } from '../../index.d'
|
||||
import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
|
||||
import { CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { chartColors } from '@/settings/chartThemes/index'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
|
||||
import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils'
|
||||
import { useLifeHandler } from '@/hooks'
|
||||
|
||||
// 初始化数据池
|
||||
const { initDataPond, clearMittDataPondMap } = useChartDataPondFetch()
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const props = defineProps({
|
||||
localStorageInfo: {
|
||||
@ -63,10 +65,11 @@ const themeSetting = computed(() => {
|
||||
return chartThemeSetting
|
||||
})
|
||||
|
||||
|
||||
// 配置项
|
||||
const themeColor = computed(() => {
|
||||
const chartThemeColor = props.localStorageInfo.editCanvasConfig.chartThemeColor
|
||||
return chartColors[chartThemeColor]
|
||||
const colorCustomMergeData = colorCustomMerge(props.localStorageInfo.editCanvasConfig.chartCustomThemeColorInfo)
|
||||
return colorCustomMergeData[props.localStorageInfo.editCanvasConfig.chartThemeColor]
|
||||
})
|
||||
|
||||
// 组件渲染结束初始化数据池
|
||||
|
||||
Loading…
Reference in New Issue
Block a user