mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
Merge branch 'master-fetch-dev' into master-fetch
This commit is contained in:
commit
d925a8e104
@ -16,6 +16,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
"@amap/amap-jsapi-types": "^0.0.8",
|
"@amap/amap-jsapi-types": "^0.0.8",
|
||||||
|
"@iconify/json": "^2.2.158",
|
||||||
"@types/color": "^3.0.3",
|
"@types/color": "^3.0.3",
|
||||||
"@types/crypto-js": "^4.1.1",
|
"@types/crypto-js": "^4.1.1",
|
||||||
"@types/keymaster": "^1.6.30",
|
"@types/keymaster": "^1.6.30",
|
||||||
@ -32,6 +33,7 @@
|
|||||||
"gsap": "^3.11.3",
|
"gsap": "^3.11.3",
|
||||||
"highlight.js": "^11.5.0",
|
"highlight.js": "^11.5.0",
|
||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
|
"iconify-icon": "^1.0.8",
|
||||||
"keymaster": "^1.6.2",
|
"keymaster": "^1.6.2",
|
||||||
"mitt": "^3.0.0",
|
"mitt": "^3.0.0",
|
||||||
"monaco-editor": "^0.33.0",
|
"monaco-editor": "^0.33.0",
|
||||||
@ -50,8 +52,6 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^17.0.2",
|
"@commitlint/cli": "^17.0.2",
|
||||||
"@commitlint/config-conventional": "^17.0.2",
|
"@commitlint/config-conventional": "^17.0.2",
|
||||||
"@iconify/types": "^2.0.0",
|
|
||||||
"@iconify/vue": "^4.1.1",
|
|
||||||
"@types/node": "^16.11.26",
|
"@types/node": "^16.11.26",
|
||||||
"@types/three": "^0.144.0",
|
"@types/three": "^0.144.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.18.0",
|
"@typescript-eslint/eslint-plugin": "^5.18.0",
|
||||||
|
42
pnpm-lock.yaml
generated
42
pnpm-lock.yaml
generated
@ -11,6 +11,9 @@ dependencies:
|
|||||||
'@amap/amap-jsapi-types':
|
'@amap/amap-jsapi-types':
|
||||||
specifier: ^0.0.8
|
specifier: ^0.0.8
|
||||||
version: 0.0.8
|
version: 0.0.8
|
||||||
|
'@iconify/json':
|
||||||
|
specifier: ^2.2.158
|
||||||
|
version: 2.2.158
|
||||||
'@types/color':
|
'@types/color':
|
||||||
specifier: ^3.0.3
|
specifier: ^3.0.3
|
||||||
version: 3.0.3
|
version: 3.0.3
|
||||||
@ -59,6 +62,9 @@ dependencies:
|
|||||||
html2canvas:
|
html2canvas:
|
||||||
specifier: ^1.4.1
|
specifier: ^1.4.1
|
||||||
version: 1.4.1
|
version: 1.4.1
|
||||||
|
iconify-icon:
|
||||||
|
specifier: ^1.0.8
|
||||||
|
version: 1.0.8
|
||||||
keymaster:
|
keymaster:
|
||||||
specifier: ^1.6.2
|
specifier: ^1.6.2
|
||||||
version: 1.6.2
|
version: 1.6.2
|
||||||
@ -87,7 +93,7 @@ dependencies:
|
|||||||
specifier: ^0.13.1
|
specifier: ^0.13.1
|
||||||
version: 0.13.1(vue@3.2.37)
|
version: 0.13.1(vue@3.2.37)
|
||||||
vue-i18n:
|
vue-i18n:
|
||||||
specifier: ^9.2.2
|
specifier: 9.2.2
|
||||||
version: 9.2.2(vue@3.2.37)
|
version: 9.2.2(vue@3.2.37)
|
||||||
vue-router:
|
vue-router:
|
||||||
specifier: 4.0.12
|
specifier: 4.0.12
|
||||||
@ -109,12 +115,6 @@ devDependencies:
|
|||||||
'@commitlint/config-conventional':
|
'@commitlint/config-conventional':
|
||||||
specifier: ^17.0.2
|
specifier: ^17.0.2
|
||||||
version: 17.0.2
|
version: 17.0.2
|
||||||
'@iconify/types':
|
|
||||||
specifier: ^2.0.0
|
|
||||||
version: 2.0.0
|
|
||||||
'@iconify/vue':
|
|
||||||
specifier: ^4.1.1
|
|
||||||
version: 4.1.1(vue@3.2.37)
|
|
||||||
'@types/node':
|
'@types/node':
|
||||||
specifier: ^16.11.26
|
specifier: ^16.11.26
|
||||||
version: 16.11.40
|
version: 16.11.40
|
||||||
@ -1122,18 +1122,16 @@ packages:
|
|||||||
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
|
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@iconify/types@2.0.0:
|
/@iconify/json@2.2.158:
|
||||||
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
|
resolution: {integrity: sha512-6foGYcG97nmYpJ7N0MAbtfH7SKf7RvoOCYYSBi8gs+8qopXzplIP2F4lQiLrjpbPQihAoTercmGYWi4ABxLX1A==}
|
||||||
dev: true
|
|
||||||
|
|
||||||
/@iconify/vue@4.1.1(vue@3.2.37):
|
|
||||||
resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
|
|
||||||
peerDependencies:
|
|
||||||
vue: '>=3'
|
|
||||||
dependencies:
|
dependencies:
|
||||||
'@iconify/types': 2.0.0
|
'@iconify/types': 2.0.0
|
||||||
vue: 3.2.37
|
pathe: 1.1.1
|
||||||
dev: true
|
dev: false
|
||||||
|
|
||||||
|
/@iconify/types@2.0.0:
|
||||||
|
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@intlify/core-base@9.2.2:
|
/@intlify/core-base@9.2.2:
|
||||||
resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
|
resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
|
||||||
@ -3669,6 +3667,12 @@ packages:
|
|||||||
hasBin: true
|
hasBin: true
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/iconify-icon@1.0.8:
|
||||||
|
resolution: {integrity: sha512-jvbUKHXf8EnGGArmhlP2IG8VqQLFFyTvTqb9LVL2TKTh7/eCCD1o2HHE9thpbJJb6B8hzhcFb6rOKhvo7reNKA==}
|
||||||
|
dependencies:
|
||||||
|
'@iconify/types': 2.0.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/iconv-lite@0.4.24:
|
/iconv-lite@0.4.24:
|
||||||
resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
|
resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
@ -4742,6 +4746,10 @@ packages:
|
|||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/pathe@1.1.1:
|
||||||
|
resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/picocolors@1.0.0:
|
/picocolors@1.0.0:
|
||||||
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
|
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
|
||||||
|
|
||||||
|
@ -33,5 +33,5 @@ useSystemInit()
|
|||||||
|
|
||||||
// 全局语言
|
// 全局语言
|
||||||
const { locale, dateLocale } = useLang()
|
const { locale, dateLocale } = useLang()
|
||||||
|
//测试提交
|
||||||
</script>
|
</script>
|
||||||
|
3
src/components/GoIconify/index.ts
Normal file
3
src/components/GoIconify/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import GoIconify from './index.vue';
|
||||||
|
|
||||||
|
export { GoIconify };
|
34
src/components/GoIconify/index.vue
Normal file
34
src/components/GoIconify/index.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<iconify-icon
|
||||||
|
:icon="icon"
|
||||||
|
:rotate="`${rotate}deg`"
|
||||||
|
:width="width"
|
||||||
|
:style="{
|
||||||
|
color: color
|
||||||
|
}"
|
||||||
|
></iconify-icon>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineProps({
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#999999',
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '20',
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
rotate: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '0',
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
@ -119,7 +119,10 @@ export const useChartDataFetch = (
|
|||||||
|
|
||||||
if (isPreview()) {
|
if (isPreview()) {
|
||||||
targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
|
targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
|
||||||
? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
|
? addGlobalDataInterface(targetComponent, useChartEditStore, (newData: any) => {
|
||||||
|
echartsUpdateHandle(newData)
|
||||||
|
if (updateCallback) updateCallback(newData)
|
||||||
|
})
|
||||||
: requestIntervalFn()
|
: requestIntervalFn()
|
||||||
} else {
|
} else {
|
||||||
requestIntervalFn()
|
requestIntervalFn()
|
||||||
|
126
src/main.ts
126
src/main.ts
@ -1,59 +1,67 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router, { setupRouter } from '@/router'
|
import router, { setupRouter } from '@/router'
|
||||||
import i18n from '@/i18n/index'
|
import i18n from '@/i18n/index'
|
||||||
import { setupStore } from '@/store'
|
import { setupStore } from '@/store'
|
||||||
import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
|
import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
|
||||||
import { GoAppProvider } from '@/components/GoAppProvider/index'
|
import { GoAppProvider } from '@/components/GoAppProvider/index'
|
||||||
import { setHtmlTheme } from '@/utils'
|
import { setHtmlTheme } from '@/utils'
|
||||||
|
import { addCollection } from 'iconify-icon'
|
||||||
// 引入全局样式
|
import uimIcons from '@iconify/json/json/uim.json'
|
||||||
import '@/styles/pages/index.scss'
|
import lineMdIcons from '@iconify/json/json/line-md.json'
|
||||||
// 引入动画
|
import wiIcons from '@iconify/json/json/wi.json'
|
||||||
import 'animate.css/animate.min.css'
|
|
||||||
// 引入标尺
|
// 引入全局样式
|
||||||
import 'vue3-sketch-ruler/lib/style.css'
|
import '@/styles/pages/index.scss'
|
||||||
|
// 引入动画
|
||||||
async function appInit() {
|
import 'animate.css/animate.min.css'
|
||||||
const goAppProvider = createApp(GoAppProvider)
|
// 引入标尺
|
||||||
|
import 'vue3-sketch-ruler/lib/style.css'
|
||||||
const app = createApp(App)
|
// 注册图标
|
||||||
|
addCollection(uimIcons)
|
||||||
// 注册全局常用的 naive-ui 组件
|
addCollection(lineMdIcons)
|
||||||
setupNaive(app)
|
addCollection(wiIcons)
|
||||||
|
|
||||||
// 注册全局自定义指令
|
async function appInit() {
|
||||||
setupDirectives(app)
|
const goAppProvider = createApp(GoAppProvider)
|
||||||
|
|
||||||
// 注册全局自定义组件
|
const app = createApp(App)
|
||||||
setupCustomComponents(app)
|
|
||||||
|
// 注册全局常用的 naive-ui 组件
|
||||||
// 挂载状态管理
|
setupNaive(app)
|
||||||
setupStore(app)
|
|
||||||
|
// 注册全局自定义指令
|
||||||
// 解决路由守卫,Axios中可使用,Dialog,Message 等全局组件
|
setupDirectives(app)
|
||||||
goAppProvider.mount('#appProvider', true)
|
|
||||||
|
// 注册全局自定义组件
|
||||||
// 挂载路由
|
setupCustomComponents(app)
|
||||||
setupRouter(app)
|
|
||||||
|
// 挂载状态管理
|
||||||
// 路由准备就绪后挂载APP实例
|
setupStore(app)
|
||||||
await router.isReady()
|
|
||||||
|
// 解决路由守卫,Axios中可使用,Dialog,Message 等全局组件
|
||||||
// Store 准备就绪后处理主题色
|
goAppProvider.mount('#appProvider', true)
|
||||||
setHtmlTheme()
|
|
||||||
|
// 挂载路由
|
||||||
// 语言注册
|
setupRouter(app)
|
||||||
app.use(i18n)
|
|
||||||
|
// 路由准备就绪后挂载APP实例
|
||||||
// 挂载到页面
|
await router.isReady()
|
||||||
app.mount('#app', true)
|
|
||||||
|
// Store 准备就绪后处理主题色
|
||||||
// 挂载到 window
|
setHtmlTheme()
|
||||||
window['$vue'] = app
|
|
||||||
}
|
// 语言注册
|
||||||
|
app.use(i18n)
|
||||||
appInit().then(() => {
|
|
||||||
initFunction()
|
// 挂载到页面
|
||||||
})
|
app.mount('#app', true)
|
||||||
|
|
||||||
|
// 挂载到 window
|
||||||
|
window['$vue'] = app
|
||||||
|
}
|
||||||
|
|
||||||
|
appInit().then(() => {
|
||||||
|
initFunction()
|
||||||
|
})
|
||||||
|
|
||||||
|
@ -1,44 +1,52 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
<v-chart
|
||||||
</template>
|
ref="vChartRef"
|
||||||
|
:init-options="initOptions"
|
||||||
<script setup lang="ts">
|
:theme="themeColor"
|
||||||
import { computed, PropType } from 'vue'
|
:option="(option as EChartsOption)"
|
||||||
import VChart from 'vue-echarts'
|
:manual-update="isPreview()"
|
||||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
autoresize
|
||||||
import { use } from 'echarts/core'
|
></v-chart>
|
||||||
import { CanvasRenderer } from 'echarts/renderers'
|
</template>
|
||||||
import { FunnelChart } from 'echarts/charts'
|
|
||||||
import { includes } from './config'
|
<script setup lang="ts">
|
||||||
import { mergeTheme } from '@/packages/public/chart'
|
import { computed, PropType } from 'vue'
|
||||||
import { useChartDataFetch } from '@/hooks'
|
import VChart from 'vue-echarts'
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
import { EChartsOption } from 'echarts'
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||||
import { isPreview } from '@/utils'
|
import { use } from 'echarts/core'
|
||||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { FunnelChart } from 'echarts/charts'
|
||||||
const props = defineProps({
|
import { includes } from './config'
|
||||||
themeSetting: {
|
import { mergeTheme } from '@/packages/public/chart'
|
||||||
type: Object,
|
import { useChartDataFetch } from '@/hooks'
|
||||||
required: true
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
},
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
themeColor: {
|
import { isPreview } from '@/utils'
|
||||||
type: Object,
|
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||||
required: true
|
|
||||||
},
|
const props = defineProps({
|
||||||
chartConfig: {
|
themeSetting: {
|
||||||
type: Object as PropType<CreateComponentType>,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
}
|
},
|
||||||
})
|
themeColor: {
|
||||||
|
type: Object,
|
||||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
required: true
|
||||||
|
},
|
||||||
use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
const option = computed(() => {
|
required: true
|
||||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||||
</script>
|
|
||||||
|
use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
|
||||||
|
|
||||||
|
const option = computed(() => {
|
||||||
|
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||||
|
})
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||||
|
</script>
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
ref="vChartRef"
|
ref="vChartRef"
|
||||||
:init-options="initOptions"
|
:init-options="initOptions"
|
||||||
:theme="themeColor"
|
:theme="themeColor"
|
||||||
:option="option"
|
:option="(option as EChartsOption)"
|
||||||
:manual-update="isPreview()"
|
:manual-update="isPreview()"
|
||||||
autoresize
|
autoresize
|
||||||
></v-chart>
|
></v-chart>
|
||||||
@ -12,6 +12,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, PropType, watch } from 'vue'
|
import { ref, computed, PropType, watch } from 'vue'
|
||||||
import VChart from 'vue-echarts'
|
import VChart from 'vue-echarts'
|
||||||
|
import { EChartsOption } from 'echarts'
|
||||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||||
import dataJson from './data.json'
|
import dataJson from './data.json'
|
||||||
import { use } from 'echarts/core'
|
import { use } from 'echarts/core'
|
||||||
|
@ -1,95 +1,103 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
<v-chart
|
||||||
</template>
|
ref="vChartRef"
|
||||||
|
:init-options="initOptions"
|
||||||
<script setup lang="ts">
|
:theme="themeColor"
|
||||||
import { ref, watch, computed, PropType } from 'vue'
|
:option="(option as EChartsOption)"
|
||||||
import VChart from 'vue-echarts'
|
:manual-update="isPreview()"
|
||||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
autoresize
|
||||||
import dataJson from './data.json'
|
></v-chart>
|
||||||
import { use } from 'echarts/core'
|
</template>
|
||||||
import { CanvasRenderer } from 'echarts/renderers'
|
|
||||||
import { HeatmapChart } from 'echarts/charts'
|
<script setup lang="ts">
|
||||||
import { includes } from './config'
|
import { ref, watch, computed, PropType } from 'vue'
|
||||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
import VChart from 'vue-echarts'
|
||||||
import { useChartDataFetch } from '@/hooks'
|
import { EChartsOption } from 'echarts'
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import dataJson from './data.json'
|
||||||
import { isPreview } from '@/utils'
|
import { use } from 'echarts/core'
|
||||||
import {
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
DatasetComponent,
|
import { HeatmapChart } from 'echarts/charts'
|
||||||
GridComponent,
|
import { includes } from './config'
|
||||||
TooltipComponent,
|
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||||
LegendComponent,
|
import { useChartDataFetch } from '@/hooks'
|
||||||
VisualMapComponent
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
} from 'echarts/components'
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { isPreview } from '@/utils'
|
||||||
const props = defineProps({
|
import {
|
||||||
themeSetting: {
|
DatasetComponent,
|
||||||
type: Object,
|
GridComponent,
|
||||||
required: true
|
TooltipComponent,
|
||||||
},
|
LegendComponent,
|
||||||
themeColor: {
|
VisualMapComponent
|
||||||
type: Object,
|
} from 'echarts/components'
|
||||||
required: true
|
|
||||||
},
|
const props = defineProps({
|
||||||
chartConfig: {
|
themeSetting: {
|
||||||
type: Object as PropType<CreateComponentType>,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
}
|
},
|
||||||
})
|
themeColor: {
|
||||||
|
type: Object,
|
||||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
required: true
|
||||||
|
},
|
||||||
use([
|
chartConfig: {
|
||||||
DatasetComponent,
|
type: Object as PropType<CreateComponentType>,
|
||||||
CanvasRenderer,
|
required: true
|
||||||
HeatmapChart,
|
}
|
||||||
GridComponent,
|
})
|
||||||
TooltipComponent,
|
|
||||||
LegendComponent,
|
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||||
VisualMapComponent
|
|
||||||
])
|
use([
|
||||||
|
DatasetComponent,
|
||||||
const option = computed(() => {
|
CanvasRenderer,
|
||||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
HeatmapChart,
|
||||||
})
|
GridComponent,
|
||||||
|
TooltipComponent,
|
||||||
const vChartRef = ref<typeof VChart>()
|
LegendComponent,
|
||||||
|
VisualMapComponent
|
||||||
const dataSetHandle = (dataset: typeof dataJson) => {
|
])
|
||||||
const { seriesData, xAxis, yAxis } = dataset
|
|
||||||
if (xAxis) {
|
const option = computed(() => {
|
||||||
// @ts-ignore
|
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||||
props.chartConfig.option.xAxis.data = xAxis
|
})
|
||||||
}
|
|
||||||
if (yAxis) {
|
const vChartRef = ref<typeof VChart>()
|
||||||
// @ts-ignore
|
|
||||||
props.chartConfig.option.yAxis.data = yAxis
|
const dataSetHandle = (dataset: typeof dataJson) => {
|
||||||
}
|
const { seriesData, xAxis, yAxis } = dataset
|
||||||
if (seriesData) {
|
if (xAxis) {
|
||||||
props.chartConfig.option.series[0].data = seriesData
|
// @ts-ignore
|
||||||
}
|
props.chartConfig.option.xAxis.data = xAxis
|
||||||
if (vChartRef.value && isPreview()) {
|
}
|
||||||
setOption(vChartRef.value, props.chartConfig.option)
|
if (yAxis) {
|
||||||
}
|
// @ts-ignore
|
||||||
}
|
props.chartConfig.option.yAxis.data = yAxis
|
||||||
|
}
|
||||||
watch(
|
if (seriesData) {
|
||||||
() => props.chartConfig.option.dataset,
|
props.chartConfig.option.series[0].data = seriesData
|
||||||
newData => {
|
}
|
||||||
try {
|
if (vChartRef.value && isPreview()) {
|
||||||
dataSetHandle(newData)
|
setOption(vChartRef.value, props.chartConfig.option)
|
||||||
} catch (error) {
|
}
|
||||||
console.log(error)
|
}
|
||||||
}
|
|
||||||
},
|
watch(
|
||||||
{
|
() => props.chartConfig.option.dataset,
|
||||||
deep: false
|
newData => {
|
||||||
}
|
try {
|
||||||
)
|
dataSetHandle(newData)
|
||||||
|
} catch (error) {
|
||||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
console.log(error)
|
||||||
dataSetHandle(newData)
|
}
|
||||||
})
|
},
|
||||||
</script>
|
{
|
||||||
|
deep: false
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
||||||
|
dataSetHandle(newData)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
@ -134,7 +134,10 @@ watch(
|
|||||||
)
|
)
|
||||||
|
|
||||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
||||||
addPieInterval(newData)
|
clearPieInterval()
|
||||||
|
if (props.chartConfig.option.isCarousel) {
|
||||||
|
addPieInterval(newData)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="go-icon-box">
|
<div class="go-icon-box">
|
||||||
<Icon :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
|
<GoIconify :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType, toRefs } from 'vue'
|
import { PropType, toRefs } from 'vue'
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
import { Icon } from '@iconify/vue'
|
import { GoIconify } from '@/components/GoIconify'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
chartConfig: {
|
chartConfig: {
|
||||||
|
@ -70,6 +70,7 @@ const click = () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: v-bind('textAlign');
|
justify-content: v-bind('textAlign');
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
color: v-bind('fontColor');
|
color: v-bind('fontColor');
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
</n-text>
|
</n-text>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-center go-flex-center go-transition" draggable="true">
|
<div class="list-center go-flex-center go-transition" draggable="true">
|
||||||
<Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" />
|
<GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" style="height: auto" />
|
||||||
<chart-glob-image v-else class="list-img" :chartConfig="item" />
|
<chart-glob-image v-else class="list-img" :chartConfig="item" />
|
||||||
</div>
|
</div>
|
||||||
<div class="list-bottom">
|
<div class="list-bottom">
|
||||||
@ -64,7 +64,7 @@ import { createComponent } from '@/packages'
|
|||||||
import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
|
import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||||
import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
|
import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
|
||||||
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
|
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
|
||||||
import { Icon } from '@iconify/vue'
|
import { GoIconify } from '@/components/GoIconify'
|
||||||
import { icon } from '@/plugins'
|
import { icon } from '@/plugins'
|
||||||
|
|
||||||
import omit from 'lodash/omit'
|
import omit from 'lodash/omit'
|
||||||
|
@ -37,7 +37,7 @@
|
|||||||
:title="item.title"
|
:title="item.title"
|
||||||
@click="selectChartHandle(item)"
|
@click="selectChartHandle(item)"
|
||||||
>
|
>
|
||||||
<Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
|
<GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
|
||||||
<chart-glob-image v-else class="list-item-img" :chartConfig="item" />
|
<chart-glob-image v-else class="list-item-img" :chartConfig="item" />
|
||||||
<n-text class="list-item-fs" depth="2">{{ item.title }}</n-text>
|
<n-text class="list-item-fs" depth="2">{{ item.title }}</n-text>
|
||||||
</div>
|
</div>
|
||||||
@ -79,7 +79,7 @@ import { isString, addEventListener, removeEventListener } from '@/utils'
|
|||||||
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
|
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
|
||||||
import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
|
import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
|
||||||
import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
|
import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
|
||||||
import { Icon } from '@iconify/vue'
|
import { GoIconify } from '@/components/GoIconify'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
menuOptions: {
|
menuOptions: {
|
||||||
|
@ -14,12 +14,17 @@ import Preview from './index.vue'
|
|||||||
let key = ref(Date.now())
|
let key = ref(Date.now())
|
||||||
|
|
||||||
// 数据变更 -> 组件销毁重建
|
// 数据变更 -> 组件销毁重建
|
||||||
;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
|
try {
|
||||||
if (!window.opener || !window.opener.addEventListener) return
|
const listenerArr = [SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW]
|
||||||
window.opener.addEventListener(saveEvent, async (e: any) => {
|
listenerArr.forEach((saveEvent: string) => {
|
||||||
const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
|
if (!window.opener || !window.opener.addEventListener) return
|
||||||
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
|
window.opener.addEventListener(saveEvent, async (e: any) => {
|
||||||
key.value = Date.now()
|
const localStorageInfo: ChartEditStorageType = (await getSessionStorageInfo()) as unknown as ChartEditStorageType
|
||||||
|
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
|
||||||
|
key.value = Date.now()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
3
types/shims-vue.d.ts
vendored
3
types/shims-vue.d.ts
vendored
@ -5,5 +5,4 @@ declare module '*.vue' {
|
|||||||
}
|
}
|
||||||
|
|
||||||
declare module 'lodash/*'
|
declare module 'lodash/*'
|
||||||
declare module 'dom-helpers'
|
declare module 'dom-helpers'
|
||||||
declare module '@iconify/vue'
|
|
@ -26,7 +26,7 @@ export default ({ mode }) => defineConfig({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
find: 'vue-i18n',
|
find: 'vue-i18n',
|
||||||
replacement: 'vue-i18n/dist/vue-i18n.cjs.js', //解决i8n警告
|
replacement: 'vue-i18n/dist/vue-i18n.cjs.js' //解决i8n警告
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
dedupe: ['vue']
|
dedupe: ['vue']
|
||||||
@ -56,7 +56,14 @@ export default ({ mode }) => defineConfig({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
vue({
|
||||||
|
template: {
|
||||||
|
compilerOptions: {
|
||||||
|
// 排除 iconify 图标影子组件编译报错
|
||||||
|
isCustomElement: tag => tag.startsWith('iconify-icon')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
monacoEditorPlugin({
|
monacoEditorPlugin({
|
||||||
languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
|
languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
|
||||||
}),
|
}),
|
||||||
|
Loading…
x
Reference in New Issue
Block a user