blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
奔跑的面条 2023-03-16 20:51:31 +08:00
commit b435366ac4
99 changed files with 1381 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -24,6 +24,7 @@
"axios": "^0.27.2",
"color": "^4.2.3",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.7",
"dom-helpers": "^5.2.1",
"echarts-liquidfill": "^3.1.0",
"echarts-stat": "^1.2.0",

BIN
src/assets/images/chart/informations/inputs_date.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/images/chart/informations/inputs_select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/images/chart/informations/inputs_tab.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

45
src/components/Pages/ChartItemSetting/EchartsRendererSetting.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<n-radio-group :value="props.modelValue || INHERIT_VALUE" @update:value="handleChange">
<n-space>
<n-tooltip :show-arrow="false" trigger="hover" v-for="item in rendererList" :key="item.value">
<template #trigger>
<n-radio :value="item.value">
{{ item.value }}
</n-radio>
</template>
{{ item.desc }}
</n-tooltip>
</n-space>
</n-radio-group>
</template>
<script setup lang="ts">
import { type EchartsRenderer } from '@/settings/chartThemes'
const props = defineProps<{ modelValue?: EchartsRenderer; includeInherit?: boolean }>()
const emits = defineEmits(['update:modelValue'])
const INHERIT_VALUE = 'inherit'
const handleChange = (val: EchartsRenderer & typeof INHERIT_VALUE) => {
emits('update:modelValue', val === INHERIT_VALUE ? undefined : val)
}
const rendererList = [
{
value: 'svg',
desc: '在缩放场景下具有更好的表现'
},
{
value: 'canvas',
desc: '数据量较大（经验判断 > 1k）、较多交互时，建议选择'
},
...(props.includeInherit
? [
{
value: INHERIT_VALUE,
desc: '默认继承全局配置'
}
]
: [])
]
</script>

41
src/components/Pages/ChartItemSetting/GlobalSetting.vue
View File

@ -1,4 +1,34 @@
<template>
<collapse-item name="渲染器">
<setting-item-box :alone="true">
<template #name>
<n-text>全局</n-text>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon size="21" :depth="3">
<help-outline-icon></help-outline-icon>
</n-icon>
</template>
<n-text>所有echarts图表组件默认都将采用所选的渲染器进行渲染</n-text>
</n-tooltip>
</template>
<EchartsRendererSetting v-model="themeSetting.renderer" />
</setting-item-box>
<setting-item-box :alone="true">
<template #name>
<n-text>当前</n-text>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon size="21" :depth="3">
<help-outline-icon></help-outline-icon>
</n-icon>
</template>
<n-text>仅当前组件采用指定渲染器渲染</n-text>
</n-tooltip>
</template>
<EchartsRendererSetting v-model="optionData.renderer" includeInherit />
</setting-item-box>
</collapse-item>
<collapse-item v-if="title" name="标题">
<template #header>
<n-switch v-model:value="title.show" size="small"></n-switch>
@ -283,6 +313,11 @@ import { PropType, computed } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
import { icon } from '@/plugins'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import EchartsRendererSetting from './EchartsRendererSetting.vue'
const { HelpOutlineIcon } = icon.ionicons5
const props = defineProps({
optionData: {
@ -296,6 +331,12 @@ const props = defineProps({
}
})
const chartEditStore = useChartEditStore()
const themeSetting = computed(() => {
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
return chartThemeSetting
})
const title = computed(() => {
return props.optionData.title
})

3
src/components/Pages/ThemeColorSelect/index.vue
View File

@ -36,7 +36,7 @@
</div>
<div class="model-footer">
中国色列表来自于：
<n-a href="http://zhongguose.com">http://zhongguose.com</n-a>
<n-a href="http://zhongguose.com" target="_blank">http://zhongguose.com</n-a>
</div>
</div>
</n-modal>
@ -157,6 +157,7 @@ $height: 85vh;
}
}
.model-footer {
z-index: 1;
text-align: end;
}
}

23
src/enums/eventEnum.ts
View File

@ -10,6 +10,29 @@ export enum BaseEvent {
ON_MOUSE_LEAVE = 'mouseleave'
}
// 组件交互回调事件
export enum InteractEvents {
INTERACT_ON = 'interactOn',
INTERACT_COMPONENT_ID = 'interactComponentId',
INTERACT_FN = 'interactFn'
}
// 全局组件交互回调事件触发的类型（当然可以自定义名称）
export enum InteractEventOn {
CLICK = 'click',
CHANGE = 'change'
}
// 确定交互组件触发类型 key名称
export const COMPONENT_INTERACT_EVENT_KET = 'componentInteractEventKey'
// 交互式组件的触发配置
export type InteractActionsType = {
interactType: InteractEventOn
interactName: string
componentEmitEvents: { [T: string]: { value: any; label: string }[] }
}
// vue3 生命周期事件
export enum EventLife {
// 渲染之后

3
src/hooks/index.ts
View File

@ -4,4 +4,5 @@ export * from '@/hooks/useCode.hook'
export * from '@/hooks/useChartDataFetch.hook'
export * from '@/hooks/useChartDataPondFetch.hook'
export * from '@/hooks/useLifeHandler.hook'
export * from '@/hooks/useLang.hook'
export * from '@/hooks/useLang.hook'
export * from '@/hooks/useChartInteract.hook'

26
src/hooks/useCanvasInitOptions.hook.ts Normal file
View File

@ -0,0 +1,26 @@
import { inject, type Ref } from 'vue'
import { EchartsRenderer } from '@/settings/chartThemes'
import { SCALE_KEY } from '@/views/preview/hooks/useScale.hook'
import { use } from 'echarts/core'
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
use([CanvasRenderer, SVGRenderer])
type InitOptions = {
renderer: EchartsRenderer
devicePixelRatio?: number
}
// 获取需要给当前echarts组件设置什么初始值
export function useCanvasInitOptions(option: any, themeSetting: any) {
const renderer = option.renderer || themeSetting.renderer
const initOptions: InitOptions = { renderer }
const scaleRef = inject<Ref<{ width: number; height: number }>>(SCALE_KEY) || { value: { width: 1, height: 1 } }
if (renderer === 'canvas') {
initOptions.devicePixelRatio = Math.ceil(
Math.max(window.devicePixelRatio, scaleRef.value.width, scaleRef.value.height)
)
}
return initOptions
}

16
src/hooks/useChartDataFetch.hook.ts
View File

@ -1,4 +1,4 @@
import { ref, toRefs, toRaw } from 'vue'
import { ref, toRefs, toRaw, watch } from 'vue'
import type VChart from 'vue-echarts'
import { customizeHttp } from '@/api/http'
import { useChartDataPondFetch } from '@/hooks/'
@ -87,8 +87,18 @@ export const useChartDataFetch = (
}
}
// 立即调用
fetchFn()
// 普通初始化与组件交互处理监听
watch(
() => targetComponent.request,
() => {
fetchFn()
},
{
immediate: true,
deep: true
}
)
// 定时时间
const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
// 单位

40
src/hooks/useChartInteract.hook.ts Normal file
View File

@ -0,0 +1,40 @@
import { toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
// 获取类型
type ChartEditStoreType = typeof useChartEditStore
// Params 参数修改触发 api 更新图表请求
export const useChartInteract = (
chartConfig: CreateComponentType,
useChartEditStore: ChartEditStoreType,
param: { [T: string]: any },
interactEventOn: string
) => {
const chartEditStore = useChartEditStore()
const { interactEvents } = chartConfig.events
const fnOnEvent = interactEvents.filter(item => {
return item.interactOn === interactEventOn
})
if (fnOnEvent.length === 0) return
fnOnEvent.forEach(item => {
const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
if (index === -1) return
const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
Object.keys(item.interactFn).forEach(key => {
if (Params.value[key]) {
Params.value[key] = param[item.interactFn[key]]
}
if (Header.value[key]) {
Header.value[key] = param[item.interactFn[key]]
}
})
})
}
// 联动事件触发的 type 变更时，清除当前绑定内容
export const clearInteractEvent = (chartConfig: CreateComponentType) => {
}

4
src/packages/components/Charts/Bars/BarCommon/index.vue
View File

@ -1,6 +1,7 @@
<template>
<v-chart
ref="vChartRef"
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
@ -14,6 +15,7 @@
<script setup lang="ts">
import { ref, nextTick, computed, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
@ -41,6 +43,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
const replaceMergeArr = ref<string[]>()

4
src/packages/components/Charts/Bars/BarCrossrange/index.vue
View File

@ -1,6 +1,7 @@
<template>
<v-chart
ref="vChartRef"
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
@ -14,6 +15,7 @@
<script setup lang="ts">
import { ref, nextTick, computed, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
@ -40,6 +42,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
const replaceMergeArr = ref<string[]>()

4
src/packages/components/Charts/Lines/LineCommon/index.vue
View File

@ -1,6 +1,7 @@
<template>
<v-chart
ref="vChartRef"
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
@ -15,6 +16,7 @@
<script setup lang="ts">
import { PropType, computed, watch, ref, nextTick } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
@ -41,6 +43,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
const replaceMergeArr = ref<string[]>()

5
src/packages/components/Charts/Lines/LineGradientSingle/index.vue
View File

@ -1,11 +1,12 @@
<template>
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
</v-chart>
</template>
<script setup lang="ts">
import { reactive, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
@ -32,6 +33,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
const chartEditStore = useChartEditStore()

5
src/packages/components/Charts/Lines/LineGradients/index.vue
View File

@ -1,10 +1,11 @@
<template>
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
</template>
<script setup lang="ts">
import { reactive, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
@ -31,6 +32,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
const chartEditStore = useChartEditStore()

5
src/packages/components/Charts/Lines/LineLinearSingle/index.vue
View File

@ -1,11 +1,12 @@
<template>
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
</v-chart>
</template>
<script setup lang="ts">
import { PropType, watch, reactive } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
@ -32,6 +33,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
const chartEditStore = useChartEditStore()

5
src/packages/components/Charts/Maps/MapBase/index.vue
View File

@ -1,5 +1,5 @@
<template>
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
</v-chart>
</template>
@ -7,6 +7,7 @@
import { PropType, reactive, watch, ref, nextTick } from 'vue'
import config, { includes } from './config'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use, registerMap } from 'echarts/core'
import { EffectScatterChart, MapChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
@ -32,6 +33,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([
MapChart,
DatasetComponent,

5
src/packages/components/Charts/Mores/Funnel/index.vue
View File

@ -1,10 +1,11 @@
<template>
<v-chart ref="vChartRef" :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">
import { computed, PropType } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { FunnelChart } from 'echarts/charts'
@ -31,6 +32,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
const option = computed(() => {

5
src/packages/components/Charts/Mores/Heatmap/index.vue
View File

@ -1,10 +1,11 @@
<template>
<v-chart ref="vChartRef" :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">
import { ref, watch, computed, PropType } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import dataJson from './data.json'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
@ -38,6 +39,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([
DatasetComponent,
CanvasRenderer,

5
src/packages/components/Charts/Mores/Radar/index.vue
View File

@ -1,10 +1,11 @@
<template>
<v-chart ref="vChartRef" :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">
import { ref, computed, PropType, watch } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import dataJson from './data.json'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
@ -32,6 +33,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
const vChartRef = ref<typeof VChart>()

5
src/packages/components/Charts/Mores/TreeMap/index.vue
View File

@ -1,10 +1,11 @@
<template>
<v-chart ref="vChartRef" :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">
import { ref, computed, PropType, watch } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import dataJson from './data.json'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
@ -31,6 +32,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([CanvasRenderer, TreemapChart])
const vChartRef = ref<typeof VChart>()

5
src/packages/components/Charts/Mores/WaterPolo/index.vue
View File

@ -1,10 +1,11 @@
<template>
<v-chart :theme="themeColor" :option="option.value" autoresize></v-chart>
<v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize></v-chart>
</template>
<script setup lang="ts">
import { PropType, watch, reactive } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import 'echarts-liquidfill/src/liquidFill.js'
import { CanvasRenderer } from 'echarts/renderers'
@ -30,6 +31,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([CanvasRenderer, GridComponent])
const chartEditStore = useChartEditStore()

5
src/packages/components/Charts/Pies/PieCircle/index.vue
View File

@ -1,10 +1,11 @@
<template>
<v-chart :theme="themeColor" :option="option.value" autoresize> </v-chart>
<v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
</template>
<script setup lang="ts">
import { PropType, reactive, watch } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
@ -29,6 +30,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
const option = reactive({

5
src/packages/components/Charts/Pies/PieCommon/index.vue
View File

@ -1,10 +1,11 @@
<template>
<v-chart ref="vChartRef" :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">
import { computed, PropType, reactive, watch } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
@ -30,6 +31,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
const option = computed(() => {

4
src/packages/components/Charts/Scatters/ScatterCommon/index.vue
View File

@ -1,6 +1,7 @@
<template>
<v-chart
ref="vChartRef"
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
@ -13,6 +14,7 @@
<script setup lang="ts">
import { PropType, computed, watch, ref, nextTick } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { ScatterChart, EffectScatterChart } from 'echarts/charts'
@ -46,6 +48,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([
DatasetComponent,
CanvasRenderer,

4
src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/index.vue
View File

@ -1,6 +1,7 @@
<template>
<v-chart
ref="vChartRef"
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
@ -13,6 +14,7 @@
<script setup lang="ts">
import { PropType, computed, ref } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import ecStat from 'echarts-stat'
import { use, registerTransform } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
@ -47,6 +49,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([
DatasetComponent,
CanvasRenderer,

3
src/packages/components/Decorates/Borders/Border01/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border01Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border01Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border01.png'
}

4
src/packages/components/Decorates/Borders/Border02/index.ts
View File

@ -1,5 +1,4 @@
import image from '@/assets/images/chart/decorates/border02.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border02Config: ConfigType = {
@ -10,5 +9,6 @@ export const Border02Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border02.png'
}

3
src/packages/components/Decorates/Borders/Border03/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border03Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border03Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border03.png'
}

3
src/packages/components/Decorates/Borders/Border04/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border04Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border04Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border04.png'
}

3
src/packages/components/Decorates/Borders/Border05/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border05Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border05Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border05.png'
}

3
src/packages/components/Decorates/Borders/Border06/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border06Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border06Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border06.png'
}

3
src/packages/components/Decorates/Borders/Border07/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border07Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border07Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border07.png'
}

3
src/packages/components/Decorates/Borders/Border08/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border08Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border08Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border08.png'
}

3
src/packages/components/Decorates/Borders/Border09/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border09Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border09Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border09.png'
}

3
src/packages/components/Decorates/Borders/Border10/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border10Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border10Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border10.png'
}

3
src/packages/components/Decorates/Borders/Border11/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border11Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border11Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border11.png'
}

3
src/packages/components/Decorates/Borders/Border12/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border12Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border12Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border12.png'
}

3
src/packages/components/Decorates/Borders/Border13/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border13Config: ConfigType = {
@ -9,5 +9,6 @@ export const Border13Config: ConfigType = {
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'border13.png'
}

3
src/packages/components/Decorates/Decorates/Decorates01/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
export const Decorates01Config: ConfigType = {
@ -9,5 +9,6 @@ export const Decorates01Config: ConfigType = {
category: ChatCategoryEnum.DECORATE,
categoryName: ChatCategoryEnumName.DECORATE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'decorates01.png'
}

3
src/packages/components/Decorates/Decorates/Decorates02/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
export const Decorates02Config: ConfigType = {
@ -9,5 +9,6 @@ export const Decorates02Config: ConfigType = {
category: ChatCategoryEnum.DECORATE,
categoryName: ChatCategoryEnumName.DECORATE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'decorates02.png'
}

5
src/packages/components/Decorates/Decorates/Decorates03/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Decorates03Config: ConfigType = {
@ -9,5 +9,6 @@ export const Decorates03Config: ConfigType = {
category: ChatCategoryEnum.DECORATE,
categoryName: ChatCategoryEnumName.DECORATE,
package: PackagesCategoryEnum.DECORATES,
image: 'decorates01.png'
chartFrame: ChartFrameEnum.STATIC,
image: 'decorates03.png'
}

3
src/packages/components/Decorates/Decorates/Decorates04/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Decorates04Config: ConfigType = {
@ -9,5 +9,6 @@ export const Decorates04Config: ConfigType = {
category: ChatCategoryEnum.DECORATE,
categoryName: ChatCategoryEnumName.DECORATE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'decorates04.png'
}

4
src/packages/components/Decorates/Decorates/Decorates05/index.ts
View File

@ -1,5 +1,4 @@
import image from '@/assets/images/chart/decorates/decorates05.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Decorates05Config: ConfigType = {
@ -10,5 +9,6 @@ export const Decorates05Config: ConfigType = {
category: ChatCategoryEnum.DECORATE,
categoryName: ChatCategoryEnumName.DECORATE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'decorates05.png'
}

2
src/packages/components/Decorates/Decorates/Decorates06/index.ts
View File

@ -9,6 +9,6 @@ export const Decorates06Config: ConfigType = {
category: ChatCategoryEnum.DECORATE,
categoryName: ChatCategoryEnumName.DECORATE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.COMMON,
chartFrame: ChartFrameEnum.STATIC,
image: 'decorates06.png'
}

3
src/packages/components/Decorates/Mores/CountDown/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const CountDownConfig: ConfigType = {
@ -9,5 +9,6 @@ export const CountDownConfig: ConfigType = {
category: ChatCategoryEnum.MORE,
categoryName: ChatCategoryEnumName.MORE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.COMMON,
image: 'countdown.png'
}

3
src/packages/components/Decorates/Mores/FlipperNumber/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const FlipperNumberConfig: ConfigType = {
@ -9,5 +9,6 @@ export const FlipperNumberConfig: ConfigType = {
category: ChatCategoryEnum.MORE,
categoryName: ChatCategoryEnumName.MORE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.COMMON,
image: 'flipper-number.png'
}

3
src/packages/components/Decorates/Mores/Number/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const NumberConfig: ConfigType = {
@ -9,5 +9,6 @@ export const NumberConfig: ConfigType = {
category: ChatCategoryEnum.MORE,
categoryName: ChatCategoryEnumName.MORE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.COMMON,
image: 'number.png'
}

3
src/packages/components/Decorates/Mores/TimeCommon/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
export const TimeCommonConfig: ConfigType = {
@ -9,5 +9,6 @@ export const TimeCommonConfig: ConfigType = {
category: ChatCategoryEnum.MORE,
categoryName: ChatCategoryEnumName.MORE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'time.png'
}

2
src/packages/components/Decorates/Three/ThreeEarth01/index.ts
View File

@ -9,6 +9,6 @@ export const ThreeEarth01Config: ConfigType = {
category: ChatCategoryEnum.THREE,
categoryName: ChatCategoryEnumName.THREE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
chartFrame: ChartFrameEnum.COMMON,
image: 'threeEarth01.png'
}

24
src/packages/components/Informations/Inputs/InputsDate/config.ts Normal file
View File

@ -0,0 +1,24 @@
import dayjs from 'dayjs'
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
import { interactActions, ComponentInteractEventEnum } from './interact'
import { InputsDateConfig } from './index'
export const option = {
// 时间组件展示类型，必须和 interactActions 中定义的数据一致
[COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
// 下拉展示
isPanel: 0,
dataset: dayjs().valueOf()
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = InputsDateConfig.key
public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
public chartConfig = cloneDeep(InputsDateConfig)
public interactActions = interactActions
public option = cloneDeep(option)
}

98
src/packages/components/Informations/Inputs/InputsDate/config.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<collapse-item name="展示方式" :expanded="true">
<setting-item-box name="选择方式">
<n-select
v-model:value="optionData.isPanel"
size="small"
:options="panelOptions"
/>
</setting-item-box>
</collapse-item>
<collapse-item name="时间配置" :expanded="true">
<setting-item-box name="基础">
<setting-item name="类型">
<n-select
v-model:value="optionData.componentInteractEventKey"
size="small"
:options="datePickerTypeOptions"
/>
</setting-item>
</setting-item-box>
<setting-item-box name="默认值" :alone="true">
<n-date-picker
size="small"
v-model:value="optionData.dataset"
:type="optionData.componentInteractEventKey"
/>
</setting-item-box>
</collapse-item>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { icon } from '@/plugins'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
import { ComponentInteractEventEnum } from './interact'
const { HelpOutlineIcon } = icon.ionicons5
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const panelOptions = [
{
label: '下拉展示',
value: 0
},
{
label: '面板展示',
value: 1
}
]
const datePickerTypeOptions = [
{
label: '日期',
value: ComponentInteractEventEnum.DATE
},
{
label: '日期时间',
value: ComponentInteractEventEnum.DATE_TIME
},
{
label: '日期范围',
value: ComponentInteractEventEnum.DATE_RANGE
},
{
label: '月份',
value: ComponentInteractEventEnum.MONTH
},
{
label: '月份范围',
value: ComponentInteractEventEnum.MONTH_RANGE
},
{
label: '年份',
value: ComponentInteractEventEnum.YEAR
},
{
label: '年份范围',
value: ComponentInteractEventEnum.YEAR_RANGE
},
{
label: '季度',
value: ComponentInteractEventEnum.QUARTER
},
{
label: '季度范围',
value: ComponentInteractEventEnum.QUARTER_RANGE
}
]
</script>

14
src/packages/components/Informations/Inputs/InputsDate/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const InputsDateConfig: ConfigType = {
key: 'InputsDate',
chartKey: 'VInputsDate',
conKey: 'VCInputsDate',
title: '时间选择器',
category: ChatCategoryEnum.INPUTS,
categoryName: ChatCategoryEnumName.INPUTS,
package: PackagesCategoryEnum.INFORMATIONS,
chartFrame: ChartFrameEnum.STATIC,
image: 'inputs_date.png'
}

81
src/packages/components/Informations/Inputs/InputsDate/index.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<n-date-picker
v-model:value="option.dataset"
:panel="!!chartConfig.option.isPanel"
:type="chartConfig.option.componentInteractEventKey"
:style="`width:${w}px;`"
@update:value="onChange"
/>
</template>
<script setup lang="ts">
import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
import dayjs from 'dayjs'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks'
import { InteractEventOn } from '@/enums/eventEnum'
import { ComponentInteractParamsEnum } from './interact'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { w, h } = toRefs(props.chartConfig.attr)
const rangeDate = ref<number | number[]>()
const option = shallowReactive({
dataset: props.chartConfig.option.dataset
})
// 监听事件改变
const onChange = (v: number | number[]) => {
if (v instanceof Array) {
// 存储到联动数据
useChartInteract(
props.chartConfig,
useChartEditStore,
{
[ComponentInteractParamsEnum.DATE_START]: v[0] | dayjs().valueOf(),
[ComponentInteractParamsEnum.DATE_END]: v[1] | dayjs().valueOf(),
[ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
},
InteractEventOn.CHANGE
)
} else {
// 存储到联动数据
useChartInteract(
props.chartConfig,
useChartEditStore,
{ [ComponentInteractParamsEnum.DATE]: v },
InteractEventOn.CHANGE
)
}
}
// 手动更新
watch(
() => props.chartConfig.option.dataset,
(newData: number | number[]) => {
option.dataset = newData
// 关联目标组件首次请求带上默认内容
onChange(newData)
},
{
immediate: true
}
)
</script>
<style lang="scss" scoped>
@include deep() {
.n-input {
height: v-bind('h + "px"');
display: flex;
align-items: center;
}
}
</style>

64
src/packages/components/Informations/Inputs/InputsDate/interact.ts Normal file
View File

@ -0,0 +1,64 @@
import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
// 时间组件类型
export enum ComponentInteractEventEnum {
DATE = 'date',
DATE_TIME = 'datetime',
DATE_RANGE = 'daterange',
DATE_TIME_RANGE = 'datetimerange',
MONTH = 'month',
MONTH_RANGE = 'monthrange',
YEAR = 'year',
YEAR_RANGE = 'yearrange',
QUARTER = 'quarter',
QUARTER_RANGE = 'quarterrange'
}
// 联动参数
export enum ComponentInteractParamsEnum {
DATE = 'date',
DATE_START = 'dateStart',
DATE_END = 'dateEnd',
DATE_RANGE = 'daterange'
}
const time = [
{
value: ComponentInteractParamsEnum.DATE,
label: '日期'
}
]
const timeRange = [
{
value: ComponentInteractParamsEnum.DATE_START,
label: '开始时间'
},
{
value: ComponentInteractParamsEnum.DATE_END,
label: '结束时间'
},
{
value: ComponentInteractParamsEnum.DATE_RANGE,
label: '日期范围'
}
]
// 定义组件触发回调事件
export const interactActions: InteractActionsType[] = [
{
interactType: InteractEventOn.CHANGE,
interactName: '选择完成',
componentEmitEvents: {
[ComponentInteractEventEnum.DATE]: time,
[ComponentInteractEventEnum.DATE_TIME]: time,
[ComponentInteractEventEnum.DATE_RANGE]: timeRange,
[ComponentInteractEventEnum.MONTH]: time,
[ComponentInteractEventEnum.MONTH_RANGE]: timeRange,
[ComponentInteractEventEnum.QUARTER]: time,
[ComponentInteractEventEnum.QUARTER_RANGE]: timeRange,
[ComponentInteractEventEnum.YEAR]: time,
[ComponentInteractEventEnum.YEAR_RANGE]: timeRange,
}
}
]

37
src/packages/components/Informations/Inputs/InputsSelect/config.ts Normal file
View File

@ -0,0 +1,37 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
import { interactActions, ComponentInteractEventEnum } from './interact'
import { InputsSelectConfig } from './index'
export const option = {
// 时间组件展示类型，必须和 interactActions 中定义的数据一致
[COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
// 默认值
selectValue: '1',
// 暴露配置内容给用户
dataset: [
{
label: '选项1',
value: '1'
},
{
label: '选项2',
value: '2'
},
{
label: '选项3',
value: '3'
}
]
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = InputsSelectConfig.key
public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
public chartConfig = cloneDeep(InputsSelectConfig)
public interactActions = interactActions
public option = cloneDeep(option)
}

20
src/packages/components/Informations/Inputs/InputsSelect/config.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<collapse-item name="下拉配置" :expanded="true">
<setting-item-box name="默认值" :alone="true">
<n-select size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
</setting-item-box>
</collapse-item>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

14
src/packages/components/Informations/Inputs/InputsSelect/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const InputsSelectConfig: ConfigType = {
key: 'InputsSelect',
chartKey: 'VInputsSelect',
conKey: 'VCInputsSelect',
title: '下拉选择器',
category: ChatCategoryEnum.INPUTS,
categoryName: ChatCategoryEnumName.INPUTS,
package: PackagesCategoryEnum.INFORMATIONS,
chartFrame: ChartFrameEnum.STATIC,
image: 'inputs_select.png'
}

66
src/packages/components/Informations/Inputs/InputsSelect/index.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<n-select
v-model:value="option.value.selectValue"
:options="option.value.dataset"
:style="`width:${w}px;`"
@update:value="onChange"
/>
</template>
<script setup lang="ts">
import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks'
import { InteractEventOn } from '@/enums/eventEnum'
import { ComponentInteractParamsEnum } from './interact'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { w, h } = toRefs(props.chartConfig.attr)
const option = shallowReactive({
value: {
selectValue: props.chartConfig.option.selectValue,
dataset: props.chartConfig.option.dataset
}
})
// 监听事件改变
const onChange = (v: string) => {
// 存储到联动数据
useChartInteract(
props.chartConfig,
useChartEditStore,
{ [ComponentInteractParamsEnum.DATA]: v },
InteractEventOn.CHANGE
)
}
// 手动更新
watch(
() => props.chartConfig.option,
(newData: any) => {
option.value = newData
onChange(newData.selectValue)
},
{
immediate: true,
deep: true
}
)
</script>
<style lang="scss" scoped>
@include deep() {
.n-base-selection-label {
height: v-bind('h + "px"');
display: flex;
align-items: center;
}
}
</style>

27
src/packages/components/Informations/Inputs/InputsSelect/interact.ts Normal file
View File

@ -0,0 +1,27 @@
import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
// 时间组件类型
export enum ComponentInteractEventEnum {
DATA = 'data'
}
// 联动参数
export enum ComponentInteractParamsEnum {
DATA = 'data'
}
// 定义组件触发回调事件
export const interactActions: InteractActionsType[] = [
{
interactType: InteractEventOn.CHANGE,
interactName: '选择完成',
componentEmitEvents: {
[ComponentInteractEventEnum.DATA]: [
{
value: ComponentInteractParamsEnum.DATA,
label: '选择项'
}
]
}
}
]

39
src/packages/components/Informations/Inputs/InputsTab/config.ts Normal file
View File

@ -0,0 +1,39 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
import { interactActions, ComponentInteractEventEnum } from './interact'
import { InputsTabConfig } from './index'
export const option = {
// 时间组件展示类型，必须和 interactActions 中定义的数据一致
[COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
// 默认值
tabLabel: '选项1',
// 样式
tabType: 'segment',
// 暴露配置内容给用户
dataset: [
{
label: '选项1',
value: '1'
},
{
label: '选项2',
value: '2'
},
{
label: '选项3',
value: '3'
}
]
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = InputsTabConfig.key
public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 }
public chartConfig = cloneDeep(InputsTabConfig)
public interactActions = interactActions
public option = cloneDeep(option)
}

31
src/packages/components/Informations/Inputs/InputsTab/config.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<collapse-item name="标签页配置" :expanded="true">
<setting-item-box name="默认值" :alone="true">
<n-select size="small" v-model:value="optionData.tabType" :options="tabTypeOptions" />
</setting-item-box>
</collapse-item>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const tabTypeOptions = [
{
label: '线条',
value: 'bar'
},
{
label: '分段',
value: 'segment'
}
]
</script>

14
src/packages/components/Informations/Inputs/InputsTab/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const InputsTabConfig: ConfigType = {
key: 'InputsTab',
chartKey: 'VInputsTab',
conKey: 'VCInputsTab',
title: '标签选择器',
category: ChatCategoryEnum.INPUTS,
categoryName: ChatCategoryEnumName.INPUTS,
package: PackagesCategoryEnum.INFORMATIONS,
chartFrame: ChartFrameEnum.STATIC,
image: 'inputs_tab.png'
}

53
src/packages/components/Informations/Inputs/InputsTab/index.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<n-tabs :type="option.value.tabType" @update:value="onChange">
<n-tab v-for="(item, index) in option.value.dataset" :name="item.label" :key="index"> {{ item.label }} </n-tab>
</n-tabs>
</template>
<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks'
import { InteractEventOn } from '@/enums/eventEnum'
import { ComponentInteractParamsEnum } from './interact'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { w, h } = toRefs(props.chartConfig.attr)
const option = shallowReactive({
value: cloneDeep(props.chartConfig.option)
})
// 监听事件改变
const onChange = (v: string) => {
if (v === undefined) return
const selectItem = option.value.dataset.find((item: { label: string; value: any }) => item.label === v)
// 存储到联动数据
useChartInteract(
props.chartConfig,
useChartEditStore,
{ [ComponentInteractParamsEnum.DATA]: selectItem.value },
InteractEventOn.CHANGE
)
}
// 手动更新
watch(
() => props.chartConfig.option,
(newData: any) => {
option.value = newData
onChange(newData.tabValue)
},
{
immediate: true,
deep: true
}
)
</script>

27
src/packages/components/Informations/Inputs/InputsTab/interact.ts Normal file
View File

@ -0,0 +1,27 @@
import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
// 时间组件类型
export enum ComponentInteractEventEnum {
DATA = 'data'
}
// 联动参数
export enum ComponentInteractParamsEnum {
DATA = 'data'
}
// 定义组件触发回调事件
export const interactActions: InteractActionsType[] = [
{
interactType: InteractEventOn.CHANGE,
interactName: '选择完成',
componentEmitEvents: {
[ComponentInteractEventEnum.DATA]: [
{
value: ComponentInteractParamsEnum.DATA,
label: '选择项'
}
]
}
}
]

5
src/packages/components/Informations/Inputs/index.ts Normal file
View File

@ -0,0 +1,5 @@
import { InputsDateConfig } from './InputsDate/index'
import { InputsSelectConfig } from './InputsSelect/index'
import { InputsTabConfig } from './InputsTab/index'
export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig]

3
src/packages/components/Informations/Mores/WordCloud/config.vue
View File

@ -1,4 +1,5 @@
<template>
<global-setting :optionData="optionData"></global-setting>
<collapse-item name="词云" expanded>
<setting-item-box name="形状">
<setting-item>
@ -45,7 +46,7 @@
import { PropType, computed } from 'vue'
import { option, ShapeEnumList } from './config'
// eslint-disable-next-line no-unused-vars
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {

4
src/packages/components/Informations/Mores/WordCloud/index.vue
View File

@ -1,6 +1,7 @@
<template>
<v-chart
ref="vChartRef"
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
@ -12,6 +13,7 @@
<script setup lang="ts">
import { ref, computed, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import 'echarts-wordcloud'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
@ -38,6 +40,8 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([CanvasRenderer, GridComponent, TooltipComponent])
const replaceMergeArr = ref<string[]>()

3
src/packages/components/Informations/Texts/TextBarrage/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
export const TextBarrageConfig: ConfigType = {
@ -9,5 +9,6 @@ export const TextBarrageConfig: ConfigType = {
category: ChatCategoryEnum.TEXT,
categoryName: ChatCategoryEnumName.TEXT,
package: PackagesCategoryEnum.INFORMATIONS,
chartFrame: ChartFrameEnum.COMMON,
image: 'text_barrage.png'
}

3
src/packages/components/Informations/Texts/TextCommon/index.ts
View File

@ -1,4 +1,4 @@
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
export const TextCommonConfig: ConfigType = {
@ -9,5 +9,6 @@ export const TextCommonConfig: ConfigType = {
category: ChatCategoryEnum.TEXT,
categoryName: ChatCategoryEnumName.TEXT,
package: PackagesCategoryEnum.INFORMATIONS,
chartFrame: ChartFrameEnum.COMMON,
image: 'text_static.png'
}

3
src/packages/components/Informations/index.d.ts vendored
View File

@ -1,11 +1,14 @@
export enum ChatCategoryEnum {
TEXT = 'Texts',
TITLE = 'Titles',
INPUTS = 'Inputs',
MORE = 'Mores'
}
export enum ChatCategoryEnumName {
TEXT = '文本',
TITLE = '标题',
// 控件 => 数据录入
INPUTS = '控件',
MORE = '更多'
}

3
src/packages/components/Informations/index.ts
View File

@ -1,4 +1,5 @@
import Texts from './Texts'
import Inputs from './Inputs'
import Mores from './Mores'
export const InformationList = [...Texts, ...Mores]
export const InformationList = [...Texts, ...Inputs, ...Mores]

12
src/packages/index.d.ts vendored
View File

@ -1,4 +1,4 @@
import { BaseEvent, EventLife } from '@/enums/eventEnum'
import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
@ -120,20 +120,26 @@ export interface PublicConfigType {
}
filter?: string
status: StatusType
interactActions?: InteractActionsType[],
events: {
baseEvent: {
[K in BaseEvent]?: string
},
}
advancedEvents: {
[K in EventLife]?: string
}
interactEvents: {
[InteractEvents.INTERACT_ON]: InteractEventOn | undefined
[InteractEvents.INTERACT_COMPONENT_ID]: string | undefined
[InteractEvents.INTERACT_FN]: { [name: string]: string }
}[]
}
}
export interface CreateComponentType extends PublicConfigType, requestConfig {
key: string
chartConfig: ConfigType
option: GlobalThemeJsonType,
option: GlobalThemeJsonType
}
// 组件成组实例类

3
src/packages/public/publicConfig.ts
View File

@ -102,7 +102,8 @@ export class PublicConfigClass implements PublicConfigType {
advancedEvents: {
[EventLife.VNODE_MOUNTED]: undefined,
[EventLife.VNODE_BEFORE_MOUNT]: undefined
}
},
interactEvents: []
}
}

7
src/router/router-guards.ts
View File

@ -5,6 +5,13 @@ import { loginCheck } from '@/utils'
export function createRouterGuards(router: Router) {
// 前置
router.beforeEach(async (to, from, next) => {
// http://localhost:3000/#/chart/preview/792622755697790976?t=123
// 把外部动态参数放入window.route.params，后续API动态接口可以用window.route?.params?.t来拼接参数
// @ts-ignore
if (!window.route) window.route = {params: {}}
// @ts-ignore
Object.assign(window.route.params, to.query)
const Loading = window['$loading'];
Loading && Loading.start();
const isErrorPage = router.getRoutes().findIndex((item) => item.name === to.name);

5
src/settings/chartThemes/index.ts
View File

@ -64,10 +64,13 @@ export const chartColorsSearch = {
roma: ['#e01f54', '#5e4ea5', 'rgba(137, 52, 72, 0.3)', 'rgba(224, 31, 84, 0.5)', 'rgba(94, 78, 165, 0.5)'],
}
export type EchartsRenderer = 'svg' | 'canvas';
// 默认主题详细配置
type ThemeJsonType = typeof themeJson
export interface GlobalThemeJsonType extends Partial<ThemeJsonType> {
dataset?: any,
renderer?: EchartsRenderer,
[T:string]: any
}
export const globalThemeJson = {...themeJson, dataset: null,}
export const globalThemeJson = {...themeJson, dataset: null, renderer: 'svg' as const }

2
src/settings/designSetting.ts
View File

@ -44,7 +44,7 @@ export const asideCollapsedWidth = 60
export const maskClosable = false
// 全局边框圆角
export const borderRadius = '6px'
export const borderRadius = '4px'
// 轮播间隔
export const carouselInterval = 4000

5
src/utils/router.ts
View File

@ -159,7 +159,8 @@ export const fetchRouteParams = () => {
*/
export const fetchRouteParamsLocation = () => {
try {
return document.location.hash.split('/').pop() || ''
// 防止添加query参数的时候，解析ID异常
return document.location.hash.split('?')[0].split('/').pop() || ''
} catch (error) {
window['$message'].warning('查询路由信息失败，请联系管理员！')
return ''
@ -190,4 +191,4 @@ export const loginCheck = () => {
} catch (error) {
return false
}
}
}

2
src/views/chart/ContentBox/index.vue
View File

@ -10,7 +10,7 @@
<slot name="icon"></slot>
</div>
</n-space>
<n-space align="center" style="gap: 4px">
<n-space class="go-flex-no-wrap" align="center" style="gap: 4px">
<slot name="top-right"></slot>
<n-icon v-show="backIcon" size="20" class="go-cursor-pointer go-d-block" @click="backHandle">
<chevron-back-outline-icon></chevron-back-outline-icon>

3
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
View File

@ -135,8 +135,9 @@ const sendHandle = async () => {
showMatching.value = true
return
}
window['$message'].warning('数据异常，请检查参数！')
window['$message'].warning('没有拿到返回值，请检查接口！')
} catch (error) {
console.error(error);
loading.value = false
window['$message'].warning('数据异常，请检查参数！')
}

3
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
View File

@ -132,8 +132,9 @@ const fetchTargetData = async () => {
sourceData.value = res
return
}
window['$message'].warning('数据异常，请检查参数！')
window['$message'].warning('没有拿到返回值，请检查接口！')
} catch (error) {
console.error(error);
window['$message'].warning('数据异常，请检查参数！')
}
}

7
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue
View File

@ -114,10 +114,6 @@ const sendHandle = async () => {
}
loading.value = true
try {
// const res = await customizeHttp(
// toRaw(pondData.value?.dataPondRequestConfig),
// toRaw(chartEditStore.getRequestGlobalConfig)
// )
const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
loading.value = false
if (res) {
@ -126,8 +122,9 @@ const sendHandle = async () => {
showMatching.value = true
return
}
window['$message'].warning('数据异常，请检查参数！')
window['$message'].warning('没有拿到返回值，请检查接口！')
} catch (error) {
console.error(error);
loading.value = false
window['$message'].warning('数据异常，请检查参数！')
}

8
src/views/chart/ContentConfigurations/components/ChartData/index.vue
View File

@ -16,9 +16,10 @@
import { computed } from 'vue'
import { loadAsyncComponent } from '@/utils'
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { RequestDataTypeEnum } from '@/enums/httpEnum'
import { ChartFrameEnum } from '@/packages/index.d'
import { useTargetData } from '../hooks/useTargetData.hook'
import { SelectCreateDataType, SelectCreateDataEnum } from './index.d'
import { RequestDataTypeEnum } from '@/enums/httpEnum'
const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
const ChartDataAjax = loadAsyncComponent(() => import('./components/ChartDataAjax/index.vue'))
@ -44,6 +45,9 @@ const selectOptions: SelectCreateDataType[] = [
// 无数据源
const isNotData = computed(() => {
return typeof targetData.value?.option?.dataset === 'undefined'
return (
targetData.value.chartConfig?.chartFrame === ChartFrameEnum.STATIC ||
typeof targetData.value?.option?.dataset === 'undefined'
)
})
</script>

2
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue
View File

@ -1,5 +1,5 @@
<template>
<n-collapse-item title="高级事件配置" name="2">
<n-collapse-item title="高级事件配置" name="3">
<template #header-extra>
<n-button type="primary" tertiary size="small" @click.stop="showModal = true">
<template #icon>

2
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue
View File

@ -1,5 +1,5 @@
<template>
<n-collapse-item title="基础事件配置" name="1">
<n-collapse-item title="基础事件配置" name="2">
<template #header-extra>
<n-button type="primary" tertiary size="small" @click.stop="showModal = true">
<template #icon>

3
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.ts Normal file
View File

@ -0,0 +1,3 @@
import ChartEventInteraction from './index.vue'
export { ChartEventInteraction }

243
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue Normal file
View File

@ -0,0 +1,243 @@
<template>
<n-collapse-item title="组件交互" name="1" v-if="interactActions.length">
<template #header-extra>
<n-button type="primary" tertiary size="small" @click.stop="evAddEventsFn">
<template #icon>
<n-icon>
<add-icon />
</n-icon>
</template>
新增
</n-button>
</template>
<!-- 无数据 -->
<div v-if="!targetData.events.interactEvents.length" class="no-data go-flex-center">
<img :src="noData" alt="暂无数据" />
<n-text :depth="3">暂无内容</n-text>
</div>
<n-card
v-for="(item, cardIndex) in targetData.events.interactEvents"
:key="cardIndex"
class="n-card-shallow"
size="small"
>
<n-space justify="space-between">
<n-text>关联组件 - {{ cardIndex + 1 }}</n-text>
<n-button type="error" text size="small" @click="evDeleteEventsFn(cardIndex)">
<template #icon>
<n-icon>
<close-icon />
</n-icon>
</template>
</n-button>
</n-space>
<n-divider style="margin: 10px 0" />
<n-tag :bordered="false" type="primary"> 选择目标组件 </n-tag>
<setting-item-box name="触发事件" :alone="true">
<n-input-group v-if="interactActions">
<n-select
class="select-type-options"
v-model:value="item.interactOn"
size="tiny"
:options="interactActions"
/>
</n-input-group>
</setting-item-box>
<setting-item-box :alone="true">
<template #name>
<n-text>绑定</n-text>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon size="21" :depth="3">
<help-outline-icon></help-outline-icon>
</n-icon>
</template>
<n-text>不支持「静态组件」和「分组」</n-text>
</n-tooltip>
</template>
<n-select
class="select-type-options"
value-field="id"
label-field="title"
size="tiny"
filterable
placeholder="仅展示符合条件的组件"
v-model:value="item.interactComponentId"
:options="fnEventsOptions()"
/>
</setting-item-box>
<setting-item-box v-if="fnDimensionsAndSource(item.interactOn).length" name="查询结果" :alone="true">
<n-table size="small" striped>
<thead>
<tr>
<th v-for="item in ['参数', '说明']" :key="item">{{ item }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn)" :key="index">
<td>{{ cItem.value }}</td>
<td>{{ cItem.label }}</td>
</tr>
</tbody>
</n-table>
</setting-item-box>
<n-tag :bordered="false" type="primary"> 关联目标组件请求参数 </n-tag>
<setting-item-box
:name="requestParamsItem"
v-for="requestParamsItem in requestParamsTypeList"
:key="requestParamsItem"
>
<setting-item
v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.interactComponentId, requestParamsItem)"
:key="index"
:name="`${ovlKey}`"
>
<n-select
size="tiny"
v-model:value="item.interactFn[ovlKey]"
:options="fnDimensionsAndSource(item.interactOn)"
clearable
></n-select>
</setting-item>
<n-text
v-show="JSON.stringify(fnGetRequest(item.interactComponentId, requestParamsItem)) === '{}'"
class="go-pt-1"
depth="3"
>
暂无数据
</n-text>
</setting-item-box>
</n-card>
</n-collapse-item>
</template>
<script lang="ts" setup>
import { VNodeChild, computed } from 'vue'
import { SelectOption, SelectGroupOption } from 'naive-ui'
import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
import { CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d'
import { RequestParamsTypeEnum } from '@/enums/httpEnum'
import { InteractEventOn, COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
import { icon } from '@/plugins'
import noData from '@/assets/images/canvas/noData.png'
import { goDialog } from '@/utils'
import { useTargetData } from '../../../hooks/useTargetData.hook'
const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5
const { targetData, chartEditStore } = useTargetData()
const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER]
// 获取组件交互事件列表
const interactActions = computed(() => {
const interactActions = targetData.value.interactActions
if (!interactActions) return []
return interactActions.map(value => ({
label: value.interactName,
value: value.interactType
}))
})
// 获取组件事件
const option = computed(() => {
return targetData.value.option
})
// 绑定组件数据 request
const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
if (!id) return {}
return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
}
// 查询结果
const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => {
if (!interactOn || !targetData.value.interactActions) return []
const tableData = targetData.value.interactActions.find(item => {
return item.interactType === interactOn
})
return tableData?.componentEmitEvents[option.value[COMPONENT_INTERACT_EVENT_KET]] || []
}
// 绑定组件列表
const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
const filterOptionList = chartEditStore.componentList.filter(item => {
// 排除自己
const isNotSelf = item.id !== targetData.value.id
// 排除静态组件
const isNotStatic = item.chartConfig.chartFrame !== ChartFrameEnum.STATIC
// 排除分组
const isNotGroup = !item.isGroup
return isNotSelf && isNotStatic && isNotGroup
})
const mapOptionList = filterOptionList.map(item => ({
id: item.id,
title: item.chartConfig.title,
disabled: false
}))
targetData.value.events.interactEvents?.forEach(iaItem => {
mapOptionList.forEach(optionItem => {
if (optionItem.id === iaItem.interactComponentId) {
optionItem.disabled = true
}
})
})
return mapOptionList
}
// 新增模块
const evAddEventsFn = () => {
targetData.value.events.interactEvents.push({
interactOn: undefined,
interactComponentId: undefined,
interactFn: {}
})
}
// 删除模块
const evDeleteEventsFn = (index: number) => {
goDialog({
message: '是否删除此关联交互模块?',
onPositiveCallback: () => {
targetData.value.events.interactEvents.splice(index, 1)
}
})
}
</script>
<style lang="scss" scoped>
.mill-chart-target-data {
:deep(pre) {
white-space: pre-wrap;
word-wrap: break-word;
}
}
.n-input-group {
height: 30px;
}
.no-data {
flex-direction: column;
width: 100%;
img {
width: 120px;
}
}
:deep(.n-base-selection .n-base-selection-label) {
height: 32px;
}
</style>

2
src/views/chart/ContentConfigurations/components/ChartEvent/index.vue
View File

@ -5,6 +5,7 @@
组件 id：
<n-text>{{ targetData.id }}</n-text>
</n-text>
<chart-event-interaction></chart-event-interaction>
<chart-event-base-handle></chart-event-base-handle>
<chart-event-advanced-handle></chart-event-advanced-handle>
</n-collapse>
@ -12,6 +13,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { ChartEventInteraction } from './components/ChartEventInteraction'
import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle'
import { ChartEventBaseHandle } from './components/ChartEventBaseHandle'
import { useTargetData } from '../hooks/useTargetData.hook'

11
src/views/chart/ContentEdit/components/EditBottom/index.vue
View File

@ -13,10 +13,11 @@
<!-- 缩放比例 -->
<n-select
:disabled="lockScale"
ref="selectInstRef"
class="scale-btn"
v-model:value="filterValue"
size="mini"
:disabled="lockScale"
:options="filterOptions"
@update:value="selectHandle"
></n-select>
@ -52,6 +53,7 @@
</template>
<script setup lang="ts">
import { SelectInst } from 'naive-ui'
import { reactive, ref, toRefs, watchEffect } from 'vue'
import { icon } from '@/plugins'
import { EditHistory } from '../EditHistory/index'
@ -59,15 +61,18 @@ import EditShortcutKey from '../EditShortcutKey/index.vue'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
// 全局颜色
const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)
const chartLayoutStore = useChartLayoutStore()
const chartEditStore = useChartEditStore()
const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas)
const selectInstRef = ref<SelectInst | null>(null)
// 缩放选项
let filterOptions = [
@ -98,7 +103,9 @@ const filterValue = ref('')
// 用户自选择
const selectHandle = (v: number) => {
selectInstRef.value?.blur()
if (v === 0) {
chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, true)
chartEditStore.computedScale()
return
}

7
src/views/chart/ContentEdit/index.vue
View File

@ -83,7 +83,7 @@
</template>
<script lang="ts" setup>
import { onMounted, computed } from 'vue'
import { onMounted, computed, provide } from 'vue'
import { chartColors } from '@/settings/chartThemes/index'
import { MenuEnum } from '@/enums/editPageEnum'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
@ -91,7 +91,7 @@ import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle,
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { SCALE_KEY } from '@/views/preview/hooks/useScale.hook'
import { useLayout } from './hooks/useLayout.hook'
import { useAddKeyboard } from '../hooks/useKeyboard.hook'
import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'
@ -108,6 +108,9 @@ import { EditTools } from './components/EditTools'
const chartEditStore = useChartEditStore()
const { handleContextMenu } = useContextMenu()
// 编辑时注入scale变量，消除警告
provide(SCALE_KEY, null);
// 布局处理
useLayout()

3
src/views/chart/ContentLayers/index.vue
View File

@ -199,9 +199,8 @@ const changeLayerType = (value: LayerModeEnum) => {
<style lang="scss" scoped>
$wight: 200px;
@include go(content-layers) {
@include go('content-layers') {
width: $wight;
flex-shrink: 0;
overflow: hidden;
@extend .go-transition;
.not-layer-text {

3
src/views/chart/hooks/useSync.hook.ts
View File

@ -48,7 +48,8 @@ const componentVersionUpdatePolyfill = (newObject: any, sources: any) => {
advancedEvents: {
[EventLife.VNODE_MOUNTED]: undefined,
[EventLife.VNODE_BEFORE_MOUNT]: undefined
}
},
interactEvents: []
}
}
return newObject

23
src/views/preview/components/PreviewRenderList/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div
class="chart-item"
v-for="(item, index) in localStorageInfo.componentList"
v-for="(item, index) in chartEditStore.componentList"
:class="animationsClass(item.styles.animations)"
:key="item.id"
:style="{
@ -52,30 +52,29 @@ import { useLifeHandler } from '@/hooks'
const { initDataPond, clearMittDataPondMap } = useChartDataPondFetch()
const chartEditStore = useChartEditStore()
const props = defineProps({
localStorageInfo: {
type: Object as PropType<ChartEditStorageType>,
required: true
}
})
// const props = defineProps({
// localStorageInfo: {
// type: Object as PropType<ChartEditStorageType>,
// required: true
// }
// })
// 主题色
const themeSetting = computed(() => {
const chartThemeSetting = props.localStorageInfo.editCanvasConfig.chartThemeSetting
const chartThemeSetting = chartEditStore.editCanvasConfig.chartThemeSetting
return chartThemeSetting
})
// 配置项
const themeColor = computed(() => {
const colorCustomMergeData = colorCustomMerge(props.localStorageInfo.editCanvasConfig.chartCustomThemeColorInfo)
return colorCustomMergeData[props.localStorageInfo.editCanvasConfig.chartThemeColor]
const colorCustomMergeData = colorCustomMerge(chartEditStore.editCanvasConfig.chartCustomThemeColorInfo)
return colorCustomMergeData[chartEditStore.editCanvasConfig.chartThemeColor]
})
// 组件渲染结束初始化数据池
clearMittDataPondMap()
onMounted(() => {
initDataPond(props.localStorageInfo.requestGlobalConfig)
initDataPond(chartEditStore.requestGlobalConfig)
})
</script>

20
src/views/preview/hooks/useScale.hook.ts
View File

@ -1,13 +1,24 @@
import { ref, onMounted, onUnmounted} from 'vue'
import { ref, provide, onMounted, onUnmounted } from 'vue'
import { usePreviewFitScale, usePreviewScrollYScale, usePreviewScrollXScale, usePreviewFullScale } from '@/hooks/index'
import type { ChartEditStorageType } from '../index.d'
import { PreviewScaleEnum } from '@/enums/styleEnum'
export const SCALE_KEY = 'scale-value'
export const useScale = (localStorageInfo: ChartEditStorageType) => {
const entityRef = ref()
const previewRef = ref()
const width = ref(localStorageInfo.editCanvasConfig.width)
const height = ref(localStorageInfo.editCanvasConfig.height)
const scaleRef = ref({ width: 1, height: 1 })
provide(SCALE_KEY, scaleRef);
const updateScaleRef = (scale: { width: number; height: number }) => {
// 这里需要解构，保证赋值给scaleRef的为一个新对象
// 因为scale始终为同一引用
scaleRef.value = { ...scale }
}
// 屏幕适配
onMounted(() => {
@ -17,6 +28,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
width.value as number,
height.value as number,
previewRef.value,
updateScaleRef
)
calcRate()
windowResize()
@ -34,6 +46,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
const dom = entityRef.value
dom.style.width = `${width.value * scale.width}px`
dom.style.height = `${height.value * scale.height}px`
updateScaleRef(scale)
}
)
calcRate()
@ -53,6 +66,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
const dom = entityRef.value
dom.style.width = `${width.value * scale.width}px`
dom.style.height = `${height.value * scale.height}px`
updateScaleRef(scale)
}
)
calcRate()
@ -68,6 +82,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
width.value as number,
height.value as number,
previewRef.value,
updateScaleRef
)
calcRate()
windowResize()
@ -81,6 +96,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
return {
entityRef,
previewRef
previewRef,
scaleRef
}
}

91
src/views/preview/index.vue
View File

@ -1,92 +1,9 @@
<template>
<div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`">
<template v-if="showEntity">
<!-- 实体区域 -->
<div ref="entityRef" class="go-preview-entity">
<!-- 缩放层 -->
<div ref="previewRef" class="go-preview-scale">
<!-- 展示层 -->
<div :style="previewRefStyle" v-if="show">
<!-- 渲染层 -->
<preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
</div>
</div>
</div>
</template>
<template v-else>
<!-- 缩放层 -->
<div ref="previewRef" class="go-preview-scale">
<!-- 展示层 -->
<div :style="previewRefStyle" v-if="show">
<!-- 渲染层 -->
<preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
</div>
</div>
</template>
</div>
<suspense>
<suspense-index></suspense-index>
</suspense>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { PreviewRenderList } from './components/PreviewRenderList'
import { getFilterStyle, setTitle } from '@/utils'
import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
import { useComInstall } from './hooks/useComInstall.hook'
import { useScale } from './hooks/useScale.hook'
import { useStore } from './hooks/useStore.hook'
import { PreviewScaleEnum } from '@/enums/styleEnum'
import type { ChartEditStorageType } from './index.d'
const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
setTitle(`预览-${localStorageInfo.editCanvasConfig.projectName}`)
const previewRefStyle = computed(() => {
return {
...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
...getFilterStyle(localStorageInfo.editCanvasConfig)
}
})
const showEntity = computed(() => {
const type = localStorageInfo.editCanvasConfig.previewScaleType
return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
})
useStore(localStorageInfo)
const { entityRef, previewRef } = useScale(localStorageInfo)
const { show } = useComInstall(localStorageInfo)
import suspenseIndex from './suspenseIndex.vue'
</script>
<style lang="scss" scoped>
@include go('preview') {
position: relative;
height: 100vh;
width: 100vw;
@include background-image('background-image');
&.fit,
&.full {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.go-preview-scale {
transform-origin: center center;
}
}
&.scrollY {
overflow-x: hidden;
.go-preview-scale {
transform-origin: left top;
}
}
&.scrollX {
overflow-y: hidden;
.go-preview-scale {
transform-origin: left top;
}
}
.go-preview-entity {
overflow: hidden;
}
}
</style>

97
src/views/preview/suspenseIndex.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`">
<template v-if="showEntity">
<!-- 实体区域 -->
<div ref="entityRef" class="go-preview-entity">
<!-- 缩放层 -->
<div ref="previewRef" class="go-preview-scale">
<!-- 展示层 -->
<div :style="previewRefStyle" v-if="show">
<!-- 渲染层 -->
<preview-render-list></preview-render-list>
</div>
</div>
</div>
</template>
<template v-else>
<!-- 缩放层 -->
<div ref="previewRef" class="go-preview-scale">
<!-- 展示层 -->
<div :style="previewRefStyle" v-if="show">
<!-- 渲染层 -->
<preview-render-list></preview-render-list>
</div>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { PreviewRenderList } from './components/PreviewRenderList'
import { getFilterStyle, setTitle } from '@/utils'
import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
import { useComInstall } from './hooks/useComInstall.hook'
import { useScale } from './hooks/useScale.hook'
import { useStore } from './hooks/useStore.hook'
import { PreviewScaleEnum } from '@/enums/styleEnum'
import type { ChartEditStorageType } from './index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
// const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
await getSessionStorageInfo()
const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType
setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
const previewRefStyle = computed(() => {
return {
...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
...getFilterStyle(chartEditStore.editCanvasConfig)
}
})
const showEntity = computed(() => {
const type = chartEditStore.editCanvasConfig.previewScaleType
return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
})
useStore(chartEditStore)
const { entityRef, previewRef } = useScale(chartEditStore)
const { show } = useComInstall(chartEditStore)
</script>
<style lang="scss" scoped>
@include go('preview') {
position: relative;
height: 100vh;
width: 100vw;
@include background-image('background-image');
&.fit,
&.full {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.go-preview-scale {
transform-origin: center center;
}
}
&.scrollY {
overflow-x: hidden;
.go-preview-scale {
transform-origin: left top;
}
}
&.scrollX {
overflow-y: hidden;
.go-preview-scale {
transform-origin: left top;
}
}
.go-preview-entity {
overflow: hidden;
}
}
</style>

17
src/views/preview/utils/storage.ts
View File

@ -1,6 +1,9 @@
import { getSessionStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum'
import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
const chartEditStore = useChartEditStore()
export interface ChartEditStorageType extends ChartEditStorage {
id: string
@ -16,11 +19,15 @@ export const getSessionStorageInfo = () => {
StorageEnum.GO_CHART_STORAGE_LIST
)
if(!storageList) return
for (let i = 0; i < storageList.length; i++) {
if (id.toString() === storageList[i]['id']) {
return storageList[i]
if (storageList) {
for (let i = 0; i < storageList.length; i++) {
if (id.toString() === storageList[i]['id']) {
const { editCanvasConfig, requestGlobalConfig, componentList } = storageList[i]
chartEditStore.editCanvasConfig = editCanvasConfig
chartEditStore.requestGlobalConfig = requestGlobalConfig
chartEditStore.componentList = componentList
return storageList[i]
}
}
}
}