Merge branch 'dev' into master-fetch-dev

This commit is contained in:
奔跑的面条 2023-09-13 10:44:28 +08:00
commit 87aa938e60
15 changed files with 202 additions and 110 deletions

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ dist
dist-ssr
*.local
.vscode
.idea

View File

@ -41,7 +41,7 @@
"three": "^0.145.0",
"vue": "^3.2.31",
"vue-demi": "^0.13.1",
"vue-i18n": "^9.2.2",
"vue-i18n": "9.2.2",
"vue-router": "4.0.12",
"vue3-lazyload": "^0.2.5-beta",
"vue3-sketch-ruler": "^1.3.3",

View File

@ -9,7 +9,8 @@ export const includes = []
// 关系图布局
export const GraphLayout = [
{ label: '无', value: 'none' },
{ label: '环形', value: 'circular' }
{ label: '环形', value: 'circular' },
{ label: '力引导', value: 'force' }
]
// 标签开关
@ -24,44 +25,57 @@ export const LabelPosition = [
{ label: '右侧', value: 'right' },
{ label: '顶部', value: 'top' },
{ label: '底部', value: 'bottom' },
{ label: '内部', value: 'inside' },
{ label: '内部', value: 'inside' }
]
// 图-迭代动画
export const LayoutAnimation = [
{ label: '开启', value: 1 },
{ label: '关闭', value: 0 }
]
export const option = {
dataset: { ...dataJson },
tooltip: {},
legend:{
show:true,
textStyle:{
color:"#eee",
fontSize: 14 ,
},
data: dataJson.categories.map(function (a) {
return a.name;
})
dataset: { ...dataJson },
tooltip: {},
legend: {
show: true,
textStyle: {
color: '#eee',
fontSize: 14
},
series: [
{
type: 'graph',
layout: 'none', // none circular环形布局
data: dataJson.nodes,
links: dataJson.links,
categories: dataJson.categories,
label: { // 标签
show: 1,
position: 'right',
formatter: '{b}'
},
labelLayout: {
hideOverlap: true
},
lineStyle: {
color: 'source', // 线条颜色
curveness: 0.2 // 线条卷曲程度
}
data: dataJson.categories.map(function (a) {
return a.name
})
},
series: [
{
type: 'graph',
layout: 'none', // none circular环形布局
data: dataJson.nodes,
links: dataJson.links,
categories: dataJson.categories,
label: {
show: 1,
position: 'right',
formatter: '{b}'
},
labelLayout: {
hideOverlap: true
},
lineStyle: {
color: 'source', // 线条颜色
curveness: 0.2 // 线条卷曲程度
},
force: {
repulsion: 100,
gravity: 0.1,
edgeLength: 30,
layoutAnimation: 1,
friction: 0.6
}
]
};
}
]
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = GraphConfig.key

View File

@ -16,14 +16,14 @@
</SettingItemBox>
<SettingItemBox name="线条">
<SettingItem name="弧线">
<!-- 需要输入两位的小数才会变化 -->
<!-- 需要输入两位的小数才会变化 -->
<n-input-number
v-model:value="optionData.series[0].lineStyle.curveness"
:min="0"
:step="0.01"
placeholder="弯曲程度"
size="small"
></n-input-number>
v-model:value="optionData.series[0].lineStyle.curveness"
:min="0"
:step="0.01"
placeholder="弯曲程度"
size="small"
></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="图例">
@ -32,10 +32,61 @@
size="small"
:modes="['hex']"
v-model:value="optionData.legend.textStyle.color"
></n-color-picker>
></n-color-picker>
</SettingItem>
<SettingItem name="文本">
<n-input-number v-model:value="optionData.legend.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
<n-input-number
v-model:value="optionData.legend.textStyle.fontSize"
:min="0"
:step="1"
size="small"
placeholder="文字大小"
>
</n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="力引导" v-if="optionData.series[0].force && graphConfig.layout == 'force'">
<SettingItem name="斥力因子" v-if="optionData.series[0].force.repulsion">
<n-input-number
v-model:value="optionData.series[0].force.repulsion"
:min="0"
:step="1"
size="small"
placeholder="斥力因子大小"
>
</n-input-number>
</SettingItem>
<SettingItem name="引力因子" v-if="optionData.series[0].force.gravity">
<n-input-number
v-model:value="optionData.series[0].force.gravity"
:min="0"
:step="0.1"
size="small"
placeholder="引力因子"
>
</n-input-number>
</SettingItem>
<SettingItem name="节点距离">
<n-input-number
v-model:value="optionData.series[0].force.edgeLength"
:min="0"
:step="1"
size="small"
placeholder="节点距离"
>
</n-input-number>
</SettingItem>
<SettingItem name="迭代动画">
<n-select v-model:value="graphConfig.force.layoutAnimation" :options="LayoutAnimation" size="small" />
</SettingItem>
<SettingItem name="节点速度">
<n-input-number
v-model:value="optionData.series[0].force.friction"
:min="0"
:step="0.1"
size="small"
placeholder="节点速度"
>
</n-input-number>
</SettingItem>
</SettingItemBox>
@ -46,7 +97,7 @@
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { option, GraphLayout, LabelSwitch, LabelPosition } from './config'
import { option, GraphLayout, LabelSwitch, LabelPosition, LayoutAnimation } from './config'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
const props = defineProps({
@ -56,7 +107,7 @@ const props = defineProps({
}
})
const graphConfig = computed<typeof option.series[0]>(() => {
const graphConfig = computed<(typeof option.series)[0]>(() => {
return props.optionData.series[0]
})
</script>

View File

@ -1,5 +1,12 @@
<template>
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
<v-chart
ref="vChartRef"
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
autoresize
></v-chart>
</template>
<script setup lang="ts">

View File

@ -8,4 +8,14 @@ import { DialConfig } from './Dial/index'
import { SankeyConfig } from './Sankey/index'
import { GraphConfig } from './Graph/index'
export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]
export default [
ProcessConfig,
RadarConfig,
FunnelConfig,
HeatmapConfig,
WaterPoloConfig,
TreeMapConfig,
GraphConfig,
SankeyConfig,
DialConfig
]

View File

@ -26,6 +26,16 @@ export let packagesList: PackagesType = {
[PackagesCategoryEnum.ICONS]: IconList
}
// 组件缓存, 可以大幅度提升组件加载速度
const componentCacheMap = new Map<string, any>()
const loadConfig = (packageName: string, categoryName: string, keyName: string) => {
const key = packageName + categoryName + keyName
if (!componentCacheMap.has(key)) {
componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`))
}
return componentCacheMap.get(key)
}
/**
* *
* @param targetData
@ -35,10 +45,10 @@ export const createComponent = async (targetData: ConfigType) => {
// redirectComponent 是给图片组件库和图标组件库使用的
if (redirectComponent) {
const [packageName, categoryName, keyName] = redirectComponent.split('/')
const redirectChart = await import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`)
const redirectChart = await loadConfig(packageName, categoryName, keyName)
return new redirectChart.default()
}
const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
const chart = await loadConfig(targetData.package, category, key)
return new chart.default()
}
@ -84,7 +94,7 @@ export const fetchImages = async (targetData?: ConfigType) => {
// 正则判断图片是否为 url是则直接返回该 url
if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
// 新数据动态处理
const { image, package: targetDataPackage } = targetData
const { image } = targetData
// 兼容旧数据
if (image.includes('@') || image.includes('base64')) return image

View File

@ -182,20 +182,16 @@ export const useChartEditStore = defineStore({
},
getComponentList(): Array<CreateComponentType | CreateComponentGroupType> {
return this.componentList
},
// 获取需要存储的数据项
}
},
actions: {
// * 获取需要存储的数据项
getStorageInfo(): ChartEditStorage {
return {
[ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
[ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,
[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
}
}
},
actions: {
// * 设置 peojectInfo 数据项
setProjectInfo<T extends keyof ProjectInfoType, K extends ProjectInfoType[T]>(key: T, value: K) {
this.projectInfo[key] = value
},
// * 设置 editCanvas 数据项
setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {

View File

@ -20,14 +20,14 @@ export const syncData = () => {
onPositiveCallback: async () => {
window['$message'].success('正在同步编辑器...')
dataSyncUpdate && (await dataSyncUpdate())
dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo() }))
}
})
}
// 同步数据到预览页
export const syncDataToPreview = () => {
dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo }))
dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo() }))
}
// 侦听器更新

View File

@ -158,7 +158,7 @@ const editHandle = () => {
// SessionStorage 便
const updateToSession = (id: string) => {
const storageInfo = chartEditStore.getStorageInfo
const storageInfo = chartEditStore.getStorageInfo()
const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
if (sessionStorageInfo?.length) {

View File

@ -1,41 +1,41 @@
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
const chartEditStore = useChartEditStore()
// 导出
export const exportHandle = () => {
// 取消选中
chartEditStore.setTargetSelectChart(undefined)
// 导出数据
downloadTextFile(
JSONStringify(chartEditStore.getStorageInfo || []),
undefined,
'json'
)
// 导出图片
const range = document.querySelector('.go-edit-range') as HTMLElement
const watermark = document.getElementById('go-edit-watermark')
// 隐藏边距线
if (!range || !watermark) {
window['$message'].error('导出失败!')
return
}
// 记录缩放比例
const scaleTemp = chartEditStore.getEditCanvas.scale
// 百分百展示页面
chartEditStore.setScale(1, true)
// 展示水印
watermark.style.display = 'block'
setTimeout(() => {
canvasCut(range, () => {
// 隐藏水印
if (watermark) watermark.style.display = 'none'
// 还原页面大小
chartEditStore.setScale(scaleTemp, true)
})
}, 600)
}
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
const chartEditStore = useChartEditStore()
// 导出
export const exportHandle = () => {
// 取消选中
chartEditStore.setTargetSelectChart(undefined)
// 导出数据
downloadTextFile(
JSONStringify(chartEditStore.getStorageInfo() || []),
undefined,
'json'
)
// 导出图片
const range = document.querySelector('.go-edit-range') as HTMLElement
const watermark = document.getElementById('go-edit-watermark')
// 隐藏边距线
if (!range || !watermark) {
window['$message'].error('导出失败!')
return
}
// 记录缩放比例
const scaleTemp = chartEditStore.getEditCanvas.scale
// 百分百展示页面
chartEditStore.setScale(1, true)
// 展示水印
watermark.style.display = 'block'
setTimeout(() => {
canvasCut(range, () => {
// 隐藏水印
if (watermark) watermark.style.display = 'none'
// 还原页面大小
chartEditStore.setScale(scaleTemp, true)
})
}, 600)
}

View File

@ -94,7 +94,7 @@ const previewHandle = () => {
const { id } = routerParamsInfo.params
// id
const previewId = typeof id === 'string' ? id : id[0]
const storageInfo = chartEditStore.getStorageInfo
const storageInfo = chartEditStore.getStorageInfo()
const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
if (sessionStorageInfo?.length) {

View File

@ -209,9 +209,7 @@ export const useSync = () => {
chartHistoryStore.clearForwardStack()
}
}
} else {
// 非组件(顺便排除脏数据)
if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
} else if (key === ChartEditStoreEnum.EDIT_CANVAS_CONFIG || key === ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG) {
componentMerge(chartEditStore[key], projectData[key], true)
}
}

View File

@ -6,8 +6,8 @@
:key="item.id"
:style="{
...getComponentAttrStyle(item.attr, groupIndex),
...getFilterStyle(item.styles),
...getTransformStyle(item.styles),
...getFilterStyle(groupData.styles),
...getTransformStyle(groupData.styles),
...getStatusStyle(item.status),
...getPreviewConfigStyle(item.preview),
...getBlendModeStyle(item.styles) as any
@ -19,7 +19,11 @@
:chartConfig="item"
:themeSetting="themeSetting"
:themeColor="themeColor"
:style="{ ...getSizeStyle(item.attr) }"
:style="{
...getSizeStyle(item.attr),
...getFilterStyle(item.styles),
...getTransformStyle(item.styles)
}"
v-on="useLifeHandler(item)"
></component>
</div>

View File

@ -47,6 +47,7 @@ setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
const previewRefStyle = computed(() => {
return {
overflow: 'hidden',
...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
...getFilterStyle(chartEditStore.editCanvasConfig)
}