mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-05 13:18:48 +08:00
feat: 新增预览接口数据动态获取功能
This commit is contained in:
parent
0d1c24c536
commit
66373a427b
@ -1,3 +0,0 @@
|
||||
import Doc from './index.vue';
|
||||
|
||||
export { Doc };
|
3
src/components/GoDoc/index.ts
Normal file
3
src/components/GoDoc/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import GoDoc from './index.vue';
|
||||
|
||||
export { GoDoc };
|
@ -1,15 +1,18 @@
|
||||
import { toRefs, watchEffect } from 'vue'
|
||||
import { ref, toRefs, watchEffect, nextTick } from 'vue'
|
||||
import type VChart from 'vue-echarts'
|
||||
import { http } from '@/api/http'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { RequestDataTypeEnum } from '@/enums/httpEnum'
|
||||
import { isPreview } from '@/utils'
|
||||
|
||||
/**
|
||||
* 数据监听与更改
|
||||
* 图表的 setdata 数据监听与更改
|
||||
* @param chartConfig
|
||||
*/
|
||||
export const useChartDataFetch = (chartConfig: CreateComponentType) => {
|
||||
let fetchInterval:any = 0
|
||||
const vChartRef = ref<typeof VChart | null>(null)
|
||||
let fetchInterval: any = 0
|
||||
|
||||
watchEffect(() => {
|
||||
clearInterval(fetchInterval)
|
||||
@ -25,15 +28,23 @@ export const useChartDataFetch = (chartConfig: CreateComponentType) => {
|
||||
// 处理地址
|
||||
if (requestUrl?.value && requestInterval.value > 0) {
|
||||
// requestOriginUrl 允许为空
|
||||
const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
|
||||
const completePath =
|
||||
requestOriginUrl && requestOriginUrl.value + requestUrl.value
|
||||
if (!completePath) return
|
||||
|
||||
fetchInterval = setInterval(async () => {
|
||||
const res = await http(requestHttpType.value)(completePath || '', {})
|
||||
if(res.data) {
|
||||
chartConfig.option.dataset = res.data as any
|
||||
if (res.data) {
|
||||
nextTick(() => {
|
||||
chartConfig.option.dataset = res.data as any
|
||||
if(isPreview() && vChartRef.value) {
|
||||
vChartRef.value.setOption(chartConfig.option)
|
||||
}
|
||||
})
|
||||
}
|
||||
}, requestInterval.value * 1000)
|
||||
}
|
||||
})
|
||||
|
||||
return { vChartRef }
|
||||
}
|
||||
|
@ -2,6 +2,7 @@ import hljs from 'highlight.js/lib/core'
|
||||
import json from 'highlight.js/lib/languages/json'
|
||||
import typescript from 'highlight.js/lib/languages/typescript'
|
||||
|
||||
// * code 展示
|
||||
export const useCode = () => {
|
||||
hljs.registerLanguage('json', json)
|
||||
hljs.registerLanguage('typescript', typescript)
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { ref } from 'vue'
|
||||
import throttle from 'lodash/throttle'
|
||||
|
||||
// * 屏幕缩放适配
|
||||
export const usePreviewScale = (
|
||||
width: number,
|
||||
height: number,
|
||||
|
@ -5,7 +5,7 @@ import { borderRadius } from '@/settings/designSetting'
|
||||
import { toLight } from '@/utils'
|
||||
|
||||
/**
|
||||
* 设置全局主题
|
||||
* * 设置全局主题
|
||||
*/
|
||||
export const useThemeOverridesHook = () => {
|
||||
const designStore = useDesignStore()
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart :theme="themeColor" :option="option" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -12,6 +12,7 @@ import { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { isPreview } from '@/utils'
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
@ -47,5 +48,5 @@ const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
useChartDataFetch(props.chartConfig)
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig)
|
||||
</script>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart :theme="themeColor" :option="option" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -11,6 +11,7 @@ import { BarChart } from 'echarts/charts'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import config, { includes } from './config'
|
||||
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
|
||||
import { isPreview } from '@/utils'
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
@ -46,5 +47,5 @@ const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
useChartDataFetch(props.chartConfig)
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig)
|
||||
</script>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -13,6 +13,8 @@ import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
|
||||
import { isPreview } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -45,7 +47,7 @@ const option = reactive({
|
||||
|
||||
// 初始化与渐变色处理
|
||||
watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
|
||||
if (!document.location.hash.includes('preview')) {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any) => {
|
||||
value.lineStyle.shadowColor = themeColor[2]
|
||||
@ -64,4 +66,6 @@ watch(() => props.chartConfig.option.dataset, () => {
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig)
|
||||
</script>
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -13,6 +13,8 @@ import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
|
||||
import { isPreview } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -45,7 +47,7 @@ const option = reactive({
|
||||
|
||||
// 渐变色处理
|
||||
watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
|
||||
if (!document.location.hash.includes('preview')) {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
@ -71,4 +73,6 @@ watch(() => props.chartConfig.option.dataset, () => {
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig)
|
||||
</script>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -13,6 +13,8 @@ import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
|
||||
import { isPreview } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -45,7 +47,7 @@ const option = reactive({
|
||||
|
||||
// 渐变色处理
|
||||
watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
|
||||
if (!document.location.hash.includes('preview')) {
|
||||
if (!isPreview()) {
|
||||
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
@ -70,4 +72,6 @@ watch(() => props.chartConfig.option.dataset, () => {
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig)
|
||||
</script>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart :theme="themeColor" :option="option" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -10,6 +10,8 @@ import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { PieChart } from 'echarts/charts'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import config, { includes } from './config'
|
||||
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
|
||||
import { isPreview } from '@/utils'
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
@ -45,4 +47,6 @@ use([
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig)
|
||||
</script>
|
||||
|
@ -128,6 +128,10 @@ export const openGiteeSourceCode = () => {
|
||||
openNewWindow(giteeSourceCodePath)
|
||||
}
|
||||
|
||||
export const isPreview = () => {
|
||||
return document.location.hash.includes('preview')
|
||||
}
|
||||
|
||||
/**
|
||||
* * 获取当前路由下的参数
|
||||
* @returns object
|
||||
|
@ -4,6 +4,14 @@ import screenfull from 'screenfull'
|
||||
import throttle from 'lodash/throttle'
|
||||
import Image_404 from '../assets/images/exception/image-404.png'
|
||||
|
||||
/**
|
||||
* * 判断是否是开发环境
|
||||
* @return { Boolean }
|
||||
*/
|
||||
export const isDev = () => {
|
||||
return import.meta.env.DEV
|
||||
}
|
||||
|
||||
/**
|
||||
* * 生成一个不重复的ID
|
||||
* @param { Number } randomLength
|
||||
|
@ -6,13 +6,15 @@
|
||||
:options="selectOptions"
|
||||
/>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="源地址:" :alone="true">
|
||||
<n-text type="info">{{ requestOriginUrl || '暂无' }}</n-text>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box :alone="true">
|
||||
<template #name>
|
||||
地址
|
||||
<n-tooltip trigger="hover" v-if="ISDEV">
|
||||
<n-tooltip trigger="hover" v-if="isDev()">
|
||||
<template #trigger>
|
||||
<n-icon size="21" :depth="3">
|
||||
<help-outline-icon></help-outline-icon>
|
||||
@ -21,7 +23,7 @@
|
||||
<span>
|
||||
开发环境使用 mock 数据,请输入【
|
||||
<n-text type="info">
|
||||
{{mockDataUrl}}
|
||||
{{ mockDataUrl }}
|
||||
</n-text>
|
||||
】
|
||||
</span>
|
||||
@ -33,6 +35,7 @@
|
||||
placeholder="请输入地址(去除源)"
|
||||
/>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="测试" :alone="true">
|
||||
<n-space>
|
||||
<n-button @click="sendHandle">
|
||||
@ -45,7 +48,9 @@
|
||||
</n-button>
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
|
||||
<go-skeleton :load="loading" :repeat="3"></go-skeleton>
|
||||
|
||||
<chart-data-matching-and-show
|
||||
v-show="showMatching && !loading"
|
||||
:ajax="true"
|
||||
@ -63,13 +68,12 @@ import { http } from '@/api/http'
|
||||
import { SelectHttpType } from '../../index.d'
|
||||
import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
|
||||
import { useTargetData } from '../../../hooks/useTargetData.hook'
|
||||
import { isDev } from '@/utils'
|
||||
|
||||
const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
|
||||
|
||||
const { targetData, chartEditStore } = useTargetData()
|
||||
const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
|
||||
// 是否是开发环境
|
||||
const ISDEV = import.meta.env.DEV === true
|
||||
// 是否展示数据分析
|
||||
const loading = ref(false)
|
||||
const showMatching = ref(false)
|
||||
@ -96,14 +100,16 @@ const sendHandle = async () => {
|
||||
}
|
||||
const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl
|
||||
const res = await http(requestHttpType)(completePath || '', {})
|
||||
loading.value = false
|
||||
if (res.status === 200) {
|
||||
// @ts-ignore
|
||||
targetData.value.option.dataset = res.data
|
||||
showMatching.value = true
|
||||
return
|
||||
}
|
||||
window['$message'].warning('数据异常,请检查接口数据!')
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
if (res.status === 200) {
|
||||
// @ts-ignore
|
||||
targetData.value.option.dataset = res.data
|
||||
showMatching.value = true
|
||||
return
|
||||
}
|
||||
window['$message'].warning('数据异常,请检查接口数据!')
|
||||
}, 500)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user