mirror of
https://gitee.com/dromara/go-view.git
synced 2025-10-14 14:32:10 +08:00
Pre Merge pull request !84 from liaohaicheng/dev
This commit is contained in:
liaohaicheng
Gitee
commit
b019b0ca4c
BIN
src/assets/images/chart/informations/text_barrage.png
Normal file
BIN
src/assets/images/chart/informations/text_barrage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -2,3 +2,4 @@ export * from '@/hooks/useTheme.hook'
|
||||
export * from '@/hooks/usePreviewScale.hook'
|
||||
export * from '@/hooks/useCode.hook'
|
||||
export * from '@/hooks/useChartDataFetch.hook'
|
||||
export * from '@/hooks/useLifeHandler.hook'
|
||||
47
src/hooks/useLifeHandler.hook.ts
Normal file
47
src/hooks/useLifeHandler.hook.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import { CreateComponentType, EventLife } from '@/packages/index.d'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
// 所有图表组件集合对象
|
||||
const components: { [K in string]?: any } = {}
|
||||
|
||||
// 项目提供的npm 包变量
|
||||
export const npmPkgs = { echarts }
|
||||
|
||||
export const useLifeHandler = (chartConfig: CreateComponentType) => {
|
||||
const events = chartConfig.events || {}
|
||||
// 生成生命周期事件
|
||||
const lifeEvents = {
|
||||
[EventLife.BEFORE_MOUNT](e: any) {
|
||||
// 存储组件
|
||||
components[chartConfig.id] = e.component
|
||||
const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim()
|
||||
generateFunc(fnStr, e)
|
||||
},
|
||||
[EventLife.MOUNTED](e: any) {
|
||||
const fnStr = (events[EventLife.MOUNTED] || '').trim()
|
||||
generateFunc(fnStr, e)
|
||||
}
|
||||
}
|
||||
return lifeEvents
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param fnStr 用户方法体代码
|
||||
* @param e 执行生命周期的动态组件实例
|
||||
*/
|
||||
function generateFunc(fnStr: string, e: any) {
|
||||
try {
|
||||
// npmPkgs 便于拷贝 echarts 示例时设置option 的formatter等相关内容
|
||||
Function(`
|
||||
"use strict";
|
||||
return (
|
||||
async function(e, components, node_modules){
|
||||
const {${Object.keys(npmPkgs).join()}} = node_modules;
|
||||
${fnStr}
|
||||
}
|
||||
)`)().bind(e?.component)(e, components, npmPkgs)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
@ -3,12 +3,6 @@
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
|
||||
<SettingItemBox name="图形">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button size="small" @click="item.itemStyle.color = null"> 恢复默认 </n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.barWidth"
|
||||
|
||||
@ -3,12 +3,6 @@
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
|
||||
<SettingItemBox name="图形">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.barWidth"
|
||||
|
||||
@ -3,9 +3,6 @@
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
|
||||
<SettingItemBox name="线条">
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.lineStyle.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
|
||||
@ -0,0 +1,42 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TextBarrageConfig } from './index'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export enum FontWeightEnum {
|
||||
NORMAL = '常规',
|
||||
BOLD = '加粗',
|
||||
}
|
||||
|
||||
export const FontWeightObject = {
|
||||
[FontWeightEnum.NORMAL]: 'normal',
|
||||
[FontWeightEnum.BOLD]: 'bold',
|
||||
}
|
||||
|
||||
export const option = {
|
||||
|
||||
dataset: '让数字化看得见',
|
||||
fontSize: 32,
|
||||
fontColor: '#ffffff',
|
||||
fontWeight: 'normal',
|
||||
// 字间距
|
||||
letterSpacing: 5,
|
||||
//阴影
|
||||
showShadow: true,
|
||||
boxShadow: 'none',
|
||||
hShadow: 0,
|
||||
vShadow: 0,
|
||||
blurShadow: 8,
|
||||
colorShadow: '#0075ff',
|
||||
//动画
|
||||
animationTime: 0,
|
||||
animationSpeed: 50,
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TextBarrageConfig.key
|
||||
public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(TextBarrageConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="文字" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.dataset" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
|
||||
<collapse-item name="样式" :expanded="true">
|
||||
<setting-item-box name="文字">
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="字体大小">
|
||||
<n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="字体粗细">
|
||||
<n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
|
||||
</setting-item>
|
||||
|
||||
<setting-item name="字间距">
|
||||
<n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="阴影">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.showShadow" size="small" />
|
||||
<n-text>展示阴影</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorShadow"></n-color-picker
|
||||
></setting-item>
|
||||
<setting-item name="x">
|
||||
<n-input-number v-model:value="optionData.hShadow" size="small"></n-input-number
|
||||
></setting-item>
|
||||
<setting-item name="y">
|
||||
<n-input-number v-model:value="optionData.vShadow" size="small"></n-input-number
|
||||
></setting-item>
|
||||
<setting-item name="模糊">
|
||||
<n-input-number v-model:value="optionData.blurShadow" size="small"></n-input-number
|
||||
></setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="动画">
|
||||
<setting-item name="动画速度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.animationSpeed"
|
||||
size="small"
|
||||
placeholder="动画速度"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="动画间隔">
|
||||
<n-input-number
|
||||
v-model:value="optionData.animationTime"
|
||||
size="small"
|
||||
placeholder="动画间隔"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option, FontWeightEnum, FontWeightObject } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const fontWeightOptions = [
|
||||
{
|
||||
label: FontWeightEnum.NORMAL,
|
||||
value: FontWeightObject[FontWeightEnum.NORMAL]
|
||||
},
|
||||
{
|
||||
label: FontWeightEnum.BOLD,
|
||||
value: FontWeightObject[FontWeightEnum.BOLD]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
@ -0,0 +1,14 @@
|
||||
import image from '@/assets/images/chart/informations/text_barrage.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const TextBarrageConfig: ConfigType = {
|
||||
key: 'TextBarrage',
|
||||
chartKey: 'VTextBarrage',
|
||||
conKey: 'VCTextBarrage',
|
||||
title: '弹幕文字',
|
||||
category: ChatCategoryEnum.TEXT,
|
||||
categoryName: ChatCategoryEnumName.TEXT,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
image
|
||||
}
|
||||
102
src/packages/components/Informations/Texts/TextBarrage/index.vue
Normal file
102
src/packages/components/Informations/Texts/TextBarrage/index.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="go-text-box">
|
||||
<div class="content">
|
||||
<span>
|
||||
{{ option.dataset }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, shallowReactive, watch, computed, ref } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { option as configOption } from './config'
|
||||
import { values } from 'lodash'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType & typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w } = toRefs(props.chartConfig.attr)
|
||||
|
||||
const { fontColor, fontSize, letterSpacing, fontWeight, animationTime, animationSpeed, boxShadow } = toRefs(
|
||||
props.chartConfig.option
|
||||
)
|
||||
|
||||
const option = shallowReactive({
|
||||
dataset: configOption.dataset
|
||||
})
|
||||
|
||||
// 手动更新
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any) => {
|
||||
option.dataset = newData
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
//阴影
|
||||
watch(
|
||||
props.chartConfig.option,
|
||||
() => {
|
||||
try {
|
||||
if (props.chartConfig.option.showShadow) {
|
||||
boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`
|
||||
} else {
|
||||
boxShadow.value = 'none'
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
const transitionDuration = computed(() => {
|
||||
return Math.floor((w.value as any) / (animationSpeed.value as any))
|
||||
})
|
||||
|
||||
// 预览更新
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
|
||||
option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('text-box') {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.content {
|
||||
width: 100%;
|
||||
color: v-bind('fontColor');
|
||||
font-size: v-bind('fontSize + "px"');
|
||||
letter-spacing: v-bind('letterSpacing + "px"');
|
||||
font-weight: v-bind('fontWeight');
|
||||
text-shadow: v-bind('boxShadow');
|
||||
position: absolute;
|
||||
animation: barrage v-bind('transitionDuration + "s"') linear v-bind('animationTime + "s"') infinite;
|
||||
}
|
||||
@keyframes barrage {
|
||||
from {
|
||||
left: 100%;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,5 @@
|
||||
import { TextCommonConfig } from './TextCommon/index'
|
||||
import { TextBarrageConfig } from './TextBarrage/index'
|
||||
import { TextGradientConfig } from './TextGradient/index'
|
||||
|
||||
export default [TextCommonConfig, TextGradientConfig]
|
||||
export default [TextCommonConfig, TextGradientConfig, TextBarrageConfig]
|
||||
|
||||
13
src/packages/index.d.ts
vendored
13
src/packages/index.d.ts
vendored
@ -90,6 +90,14 @@ export const BlendModeEnumList = [
|
||||
{ label: '亮度', value: 'luminosity' }
|
||||
]
|
||||
|
||||
// vue3 生命周期事件
|
||||
export enum EventLife {
|
||||
// 渲染之后
|
||||
MOUNTED = 'vnodeMounted',
|
||||
// 渲染之前
|
||||
BEFORE_MOUNT = 'vnodeBeforeMount',
|
||||
}
|
||||
|
||||
// 组件实例类
|
||||
export interface PublicConfigType {
|
||||
id: string
|
||||
@ -115,12 +123,15 @@ export interface PublicConfigType {
|
||||
}
|
||||
filter?: string
|
||||
status: StatusType
|
||||
events?: {
|
||||
[K in EventLife]?: string
|
||||
}
|
||||
}
|
||||
|
||||
export interface CreateComponentType extends PublicConfigType, requestConfig {
|
||||
key: string
|
||||
chartConfig: ConfigType
|
||||
option: GlobalThemeJsonType
|
||||
option: GlobalThemeJsonType,
|
||||
}
|
||||
|
||||
// 组件成组实例类
|
||||
|
||||
@ -81,6 +81,8 @@ export class PublicConfigClass implements PublicConfigType {
|
||||
public request = cloneDeep(requestConfig)
|
||||
// 数据过滤
|
||||
public filter = undefined
|
||||
// 事件
|
||||
public events = undefined
|
||||
}
|
||||
|
||||
// 多选成组类
|
||||
|
||||
@ -11,7 +11,6 @@ export const animations = [
|
||||
{ label: '放大晃动缩小', value: 'tada' },
|
||||
{ label: '扇形摇摆', value: 'wobble' },
|
||||
{ label: '左右上下晃动', value: 'jello' },
|
||||
{ label: 'Y轴旋转', value: 'flip' }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@ -116,7 +116,8 @@ $centerHeight: 100px;
|
||||
height: $centerHeight;
|
||||
overflow: hidden;
|
||||
.list-img {
|
||||
height: 100%;
|
||||
height: 100px;
|
||||
width: 140px;
|
||||
border-radius: 6px;
|
||||
@extend .go-transition;
|
||||
}
|
||||
|
||||
@ -0,0 +1,177 @@
|
||||
// 获取实例
|
||||
const eTemplateString = `
|
||||
console.log(e)
|
||||
`
|
||||
// 获取全局 echarts 实例
|
||||
const echartsTemplateString = `
|
||||
console.log(echarts)
|
||||
`
|
||||
|
||||
// 获取当前组件图表集合
|
||||
const componentsTemplateString = `
|
||||
console.log(components)
|
||||
`
|
||||
|
||||
// 获取 nodeModules 实例
|
||||
const nodeModulesTemplateString = `
|
||||
console.log(node_modules)
|
||||
`
|
||||
|
||||
// 异步引入
|
||||
const importTemplateString = `
|
||||
await import('https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.js')
|
||||
|
||||
// lodash 默认赋值给 "_"
|
||||
console.log('isEqual', _.isEqual(['1'], ['1']))
|
||||
`
|
||||
|
||||
// 修改图表 tooltip
|
||||
const tooltipTemplateString =
|
||||
`
|
||||
// 获取echart实例
|
||||
const chart = this.refs.vChartRef.chart
|
||||
|
||||
// 图表设置tooltip
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis', //item
|
||||
enterable: true,
|
||||
formatter (params) {
|
||||
return` +
|
||||
'`' +
|
||||
`
|
||||
<div>
|
||||
<img src="https://portrait.gitee.com/uploads/avatars/user/1654/4964818_MTrun_1653229420.png!avatar30">
|
||||
<b><a href="https://gitee.com/dromara/go-view">《这是一个自定义的tooltip》</a></b>
|
||||
<div>
|
||||
<div style='border-radius:35px;color:#666'>
|
||||
` +
|
||||
'$' +
|
||||
`{Object.entries(params[0].value).map(kv => ` +
|
||||
'`' +
|
||||
`<div>` +
|
||||
'$' +
|
||||
`{kv[0]}:` +
|
||||
'$' +
|
||||
`{kv[1]}</div>` +
|
||||
'`' +
|
||||
`).join('')}
|
||||
</div>
|
||||
` +
|
||||
'`;' +
|
||||
`
|
||||
},
|
||||
}
|
||||
})
|
||||
`
|
||||
|
||||
// 添加【轮播列表】样式
|
||||
const addStyleString =
|
||||
`
|
||||
// 组件样式作用域标识
|
||||
const scoped = this.subTree.scopeId
|
||||
function loadStyleString(css){
|
||||
let style = document.createElement('style')
|
||||
style.type = 'text/css'
|
||||
style.appendChild(document.createTextNode(css))
|
||||
let head = document.getElementsByTagName('head')[0]
|
||||
head.appendChild(style)
|
||||
}
|
||||
loadStyleString(` +
|
||||
'`' +
|
||||
`
|
||||
.dv-scroll-board[` +
|
||||
'$' +
|
||||
`{scoped}] {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dv-scroll-board[` +
|
||||
'$' +
|
||||
`{scoped}]::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -20%;
|
||||
left: -100%;
|
||||
width: 550px;
|
||||
height: 60px;
|
||||
transform: rotate(-45deg);
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
|
||||
animation: cross 2s infinite;
|
||||
}
|
||||
@keyframes cross{
|
||||
to{
|
||||
top: 80%;
|
||||
left: 100%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
` +
|
||||
'`' +
|
||||
`)
|
||||
`
|
||||
|
||||
// 修改地图原点大小
|
||||
const editMapPointString = `
|
||||
const chart = this.refs.vChartRef.chart
|
||||
// 定义地图原点大小 同理可自定义标签等等内容
|
||||
this.props.chartConfig.option.series[0].symbolSize = (val) => {
|
||||
return Math.sqrt(val[2]) / 3;
|
||||
}
|
||||
this.setupState.vEchartsSetOption();
|
||||
let i = 0; // 当前轮播索引
|
||||
const len = 3; // 轮播部分提示
|
||||
(function showTips() {
|
||||
const action = (type, dataIndex) => {
|
||||
chart.dispatchAction({
|
||||
type,
|
||||
dataIndex,
|
||||
seriesIndex: 0,
|
||||
});
|
||||
}
|
||||
setInterval(() => {
|
||||
action("downplay", i);
|
||||
action("hideTip", i);
|
||||
if (i === len) i = 0;
|
||||
i++;
|
||||
action("highlight", i);
|
||||
action("showTip", i);
|
||||
}, 2000);
|
||||
})()
|
||||
`
|
||||
|
||||
export const templateList = [
|
||||
{
|
||||
description: '获取当前组件实例',
|
||||
code: eTemplateString
|
||||
},
|
||||
{
|
||||
description: '获取全局 echarts 实例',
|
||||
code: echartsTemplateString
|
||||
},
|
||||
{
|
||||
description: '获取组件图表集合',
|
||||
code: componentsTemplateString
|
||||
},
|
||||
{
|
||||
description: '获取 nodeModules 实例',
|
||||
code: nodeModulesTemplateString
|
||||
},
|
||||
{
|
||||
description: '获取远程 CDN 库',
|
||||
code: importTemplateString
|
||||
},
|
||||
{
|
||||
description: '修改图表 tooltip',
|
||||
code: tooltipTemplateString
|
||||
},
|
||||
{
|
||||
description: '添加【轮播列表】样式',
|
||||
code: addStyleString
|
||||
},
|
||||
{
|
||||
description: '修改【地图】圆点，新增提示自动轮播',
|
||||
code: editMapPointString
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,3 @@
|
||||
import ChartEventMonacoEditor from './index.vue'
|
||||
|
||||
export { ChartEventMonacoEditor }
|
||||
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<n-collapse-item title="高级事件配置" name="2">
|
||||
<template #header-extra>
|
||||
<n-button type="primary" tertiary size="small" @click.stop="showModal = true">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<pencil-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
编辑
|
||||
</n-button>
|
||||
</template>
|
||||
<n-card>
|
||||
<!-- 函数体 -->
|
||||
<div v-for="eventName in EventLife" :key="eventName">
|
||||
<p>
|
||||
<span class="func-keyword">async {{ eventName }}</span> (e, components, echarts, node_modules) {
|
||||
</p>
|
||||
<p class="go-ml-4"><n-code :code="(targetData.events || {})[eventName]" language="typescript"></n-code></p>
|
||||
<p>}<span>,</span></p>
|
||||
</div>
|
||||
</n-card>
|
||||
</n-collapse-item>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1200px; height: 700px">
|
||||
<template #header>
|
||||
<n-space>
|
||||
<n-text>高级事件编辑器（配合源码使用）</n-text>
|
||||
</n-space>
|
||||
</template>
|
||||
<template #header-extra> </template>
|
||||
<n-layout has-sider sider-placement="right">
|
||||
<n-layout style="height: 580px; padding-right: 20px">
|
||||
<n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
|
||||
<!-- 提示 -->
|
||||
<template #suffix>
|
||||
<n-text class="tab-tip" type="warning">tips: {{ EventLifeTip[editTab] }}</n-text>
|
||||
</template>
|
||||
<n-tab-pane
|
||||
v-for="(eventName, index) in EventLife"
|
||||
:key="index"
|
||||
:tab="`${EventLifeName[eventName]}-${eventName}`"
|
||||
:name="eventName"
|
||||
>
|
||||
<!-- 函数名称 -->
|
||||
<p class="go-pl-3">
|
||||
<span class="func-keyword">async function </span>
|
||||
<span class="func-keyNameWord">{{ eventName }}(e, components, echarts, node_modules) {</span>
|
||||
</p>
|
||||
<!-- 编辑主体 -->
|
||||
<monaco-editor v-model:modelValue="events[eventName]" height="480px" language="javascript" />
|
||||
<!-- 函数结束 -->
|
||||
<p class="go-pl-3 func-keyNameWord">}</p>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-layout>
|
||||
<n-layout-sider
|
||||
:collapsed-width="14"
|
||||
:width="340"
|
||||
show-trigger="bar"
|
||||
collapse-mode="transform"
|
||||
content-style="padding: 12px 12px 0px 12px;margin-left: 3px;"
|
||||
>
|
||||
<n-tabs default-value="1" justify-content="space-evenly" type="segment">
|
||||
<!-- 验证结果 -->
|
||||
<n-tab-pane tab="验证结果" name="1" size="small">
|
||||
<n-scrollbar trigger="none" style="max-height: 505px">
|
||||
<n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2, 3]">
|
||||
<template v-for="error in [validEvents()]" :key="error">
|
||||
<n-collapse-item title="错误函数" :name="1">
|
||||
<n-text depth="3">{{ error.errorFn || '暂无' }}</n-text>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="错误信息" :name="2">
|
||||
<n-text depth="3">{{ error.name || '暂无' }}</n-text>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="堆栈信息" :name="3">
|
||||
<n-text depth="3">{{ error.message || '暂无' }}</n-text>
|
||||
</n-collapse-item>
|
||||
</template>
|
||||
</n-collapse>
|
||||
</n-scrollbar>
|
||||
</n-tab-pane>
|
||||
<!-- 辅助说明 -->
|
||||
<n-tab-pane tab="变量说明" name="2">
|
||||
<n-scrollbar trigger="none" style="max-height: 505px">
|
||||
<n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2, 3, 4]">
|
||||
<n-collapse-item title="e" :name="1">
|
||||
<n-text depth="3">触发对应生命周期事件时接收的参数</n-text>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="this" :name="2">
|
||||
<n-text depth="3">图表组件实例</n-text>
|
||||
<br />
|
||||
<n-tag class="go-m-1" v-for="prop in ['refs', 'setupState', 'ctx', 'props', '...']" :key="prop">{{
|
||||
prop
|
||||
}}</n-tag>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="components" :name="3">
|
||||
<n-text depth="3"
|
||||
>当前大屏内所有组件的集合id 图表组件中的配置id，可以获取其他图表组件进行控制</n-text
|
||||
>
|
||||
<n-code :code="`{\n [id]: component\n}`" language="typescript"></n-code>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="node_modules" :name="4">
|
||||
<n-text depth="3">以下是内置在代码环境中可用的包变量</n-text>
|
||||
<br />
|
||||
<n-tag class="go-m-1" v-for="pkg in Object.keys(npmPkgs || {})" :key="pkg">{{ pkg }}</n-tag>
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
</n-scrollbar>
|
||||
</n-tab-pane>
|
||||
<!-- 介绍案例 -->
|
||||
<n-tab-pane tab="介绍案例" name="3">
|
||||
<n-scrollbar trigger="none" style="max-height: 505px">
|
||||
<n-collapse arrow-placement="right">
|
||||
<n-collapse-item
|
||||
v-for="(item, index) in templateList"
|
||||
:key="index"
|
||||
:title="`案例${index + 1}：${item.description}`"
|
||||
:name="index"
|
||||
>
|
||||
<n-code :code="item.code" language="typescript"></n-code>
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
</n-scrollbar>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-layout-sider>
|
||||
</n-layout>
|
||||
|
||||
<template #action>
|
||||
<n-space justify="space-between">
|
||||
<div class="go-flex-items-center">
|
||||
<n-tag :bordered="false" type="primary">
|
||||
<template #icon>
|
||||
<n-icon :component="DocumentTextIcon" />
|
||||
</template>
|
||||
提示
|
||||
</n-tag>
|
||||
<n-text class="go-ml-2" depth="2">通过提供的参数可为图表增加定制化的tooltip、交互事件等等</n-text>
|
||||
</div>
|
||||
|
||||
<n-space>
|
||||
<n-button size="medium" @click="closeEvents">取消</n-button>
|
||||
<n-button size="medium" type="primary" @click="saveEvents">保存</n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch, toRefs, toRaw } from 'vue'
|
||||
import { MonacoEditor } from '@/components/Pages/MonacoEditor'
|
||||
import { useTargetData } from '../../../hooks/useTargetData.hook'
|
||||
import { templateList } from './importTemplate'
|
||||
import { npmPkgs } from '@/hooks'
|
||||
import { icon } from '@/plugins'
|
||||
import { goDialog, toString } from '@/utils'
|
||||
import { CreateComponentType, EventLife } from '@/packages/index.d'
|
||||
import { Script } from 'vm'
|
||||
|
||||
const { targetData, chartEditStore } = useTargetData()
|
||||
const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5
|
||||
|
||||
const EventLifeName = {
|
||||
[EventLife.BEFORE_MOUNT]: '渲染之前',
|
||||
[EventLife.MOUNTED]: '渲染之后'
|
||||
}
|
||||
|
||||
const EventLifeTip = {
|
||||
[EventLife.BEFORE_MOUNT]: '此时组件 DOM 还未存在',
|
||||
[EventLife.MOUNTED]: '此时组件 DOM 已经存在'
|
||||
}
|
||||
|
||||
// 受控弹窗
|
||||
const showModal = ref(false)
|
||||
// 编辑区域控制
|
||||
const editTab = ref(EventLife.MOUNTED)
|
||||
// events 函数模板
|
||||
let events = ref({ ...targetData.value.events })
|
||||
// 事件错误标识
|
||||
const errorFlag = ref(false)
|
||||
|
||||
// 验证语法
|
||||
const validEvents = () => {
|
||||
let errorFn = ''
|
||||
let message = ''
|
||||
let name = ''
|
||||
|
||||
errorFlag.value = Object.entries(events.value).every(([eventName, str]) => {
|
||||
try {
|
||||
// 支持await，验证语法
|
||||
const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
|
||||
new AsyncFunction(str)
|
||||
return true
|
||||
} catch (error: any) {
|
||||
message = error.message
|
||||
name = error.name
|
||||
errorFn = eventName
|
||||
return false
|
||||
}
|
||||
})
|
||||
return {
|
||||
errorFn,
|
||||
message,
|
||||
name
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭事件
|
||||
const closeEvents = () => {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
// 新增事件
|
||||
const saveEvents = () => {
|
||||
if (validEvents().errorFn) {
|
||||
window['$message'].error('事件函数错误，无法进行保存')
|
||||
return
|
||||
}
|
||||
if (Object.values(events.value).join('').trim() === '') {
|
||||
// 清空事件
|
||||
targetData.value.events = undefined
|
||||
} else {
|
||||
targetData.value.events = { ...events.value }
|
||||
}
|
||||
closeEvents()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => showModal.value,
|
||||
(newData: boolean) => {
|
||||
if (newData) {
|
||||
events.value = { ...targetData.value.events }
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 外层也要使用 */
|
||||
.func-keyword {
|
||||
color: #b478cf;
|
||||
}
|
||||
|
||||
@include go('chart-data-monaco-editor') {
|
||||
.func-keyNameWord {
|
||||
color: #70c0e8;
|
||||
}
|
||||
.tab-tip {
|
||||
font-size: 12px;
|
||||
}
|
||||
&.n-card.n-modal,
|
||||
.n-card {
|
||||
@extend .go-background-filter;
|
||||
}
|
||||
}
|
||||
@include deep() {
|
||||
.n-layout,
|
||||
.n-layout-sider {
|
||||
background-color: transparent;
|
||||
}
|
||||
.go-editor-area {
|
||||
max-height: 530px;
|
||||
}
|
||||
.checkbox--hidden:checked {
|
||||
& + label {
|
||||
.n-icon {
|
||||
transition: all 0.3s;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
& ~ .go-editor-area {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// 优化代码换行
|
||||
.n-code > pre {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<!-- 事件配置 -->
|
||||
<n-collapse class="go-mt-3" arrow-placement="right" :default-expanded-names="['1', '2']">
|
||||
<n-text depth="3">
|
||||
组件 id：
|
||||
<n-text>{{ targetData.id }}</n-text>
|
||||
</n-text>
|
||||
<n-collapse-item title="基础事件配置" name="1">
|
||||
<div class="go-event">
|
||||
<n-text depth="3"> 【单击、双击、移入、移出】尽情期待！ </n-text>
|
||||
</div>
|
||||
</n-collapse-item>
|
||||
<chart-event-monaco-editor></chart-event-monaco-editor>
|
||||
</n-collapse>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ChartEventMonacoEditor } from './components/ChartEventMonacoEditor'
|
||||
import { useTargetData } from '../hooks/useTargetData.hook'
|
||||
|
||||
const { targetData } = useTargetData()
|
||||
const showModal = ref(false)
|
||||
</script>
|
||||
@ -3,4 +3,5 @@ export enum TabsEnum {
|
||||
CHART_SETTING = 'chartSetting',
|
||||
CHART_ANIMATION = 'chartAnimation',
|
||||
CHART_DATA = 'chartData',
|
||||
CHART_EVENT = 'chartEvent'
|
||||
}
|
||||
|
||||
@ -75,12 +75,13 @@ const { getDetails } = toRefs(useChartLayoutStore())
|
||||
const { setItem } = useChartLayoutStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon } = icon.ionicons5
|
||||
const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5
|
||||
|
||||
const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
|
||||
const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue'))
|
||||
const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
|
||||
const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
|
||||
const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
|
||||
const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
|
||||
|
||||
const collapsed = ref<boolean>(getDetails.value)
|
||||
@ -148,6 +149,12 @@ const chartsTabList = [
|
||||
title: '数据',
|
||||
icon: FlashIcon,
|
||||
render: ChartData
|
||||
},
|
||||
{
|
||||
key: TabsEnum.CHART_EVENT,
|
||||
title: '事件',
|
||||
icon: RocketIcon,
|
||||
render: ChartEvent
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
:themeSetting="themeSetting"
|
||||
:themeColor="themeColor"
|
||||
:style="{ ...getSizeStyle(item.attr) }"
|
||||
v-on="useLifeHandler(item)"
|
||||
></component>
|
||||
</div>
|
||||
</template>
|
||||
@ -27,7 +28,7 @@ import { PropType } from 'vue'
|
||||
import { CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
|
||||
import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
|
||||
|
||||
import { useLifeHandler } from '@/hooks'
|
||||
const props = defineProps({
|
||||
groupData: {
|
||||
type: Object as PropType<CreateComponentGroupType>,
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
:themeSetting="themeSetting"
|
||||
:themeColor="themeColor"
|
||||
:style="{ ...getSizeStyle(item.attr) }"
|
||||
v-on="useLifeHandler(item)"
|
||||
></component>
|
||||
</div>
|
||||
</template>
|
||||
@ -41,7 +42,7 @@ import { CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { chartColors } from '@/settings/chartThemes/index'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
|
||||
import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
|
||||
|
||||
import { useLifeHandler } from '@/hooks'
|
||||
const props = defineProps({
|
||||
localStorageInfo: {
|
||||
type: Object as PropType<ChartEditStorageType>,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user