mirror of
https://gitee.com/dromara/go-view.git
synced 2024-11-30 02:38:30 +08:00
Merge branch 'dev' into master-fetch-dev
This commit is contained in:
commit
87aa938e60
1
.gitignore
vendored
1
.gitignore
vendored
@ -4,3 +4,4 @@ dist
|
||||
dist-ssr
|
||||
*.local
|
||||
.vscode
|
||||
.idea
|
||||
|
@ -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",
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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
|
||||
]
|
||||
|
@ -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
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -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() }))
|
||||
}
|
||||
|
||||
// 侦听器更新
|
||||
|
@ -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) {
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -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) {
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -47,6 +47,7 @@ setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
|
||||
|
||||
const previewRefStyle = computed(() => {
|
||||
return {
|
||||
overflow: 'hidden',
|
||||
...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
|
||||
...getFilterStyle(chartEditStore.editCanvasConfig)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user