feat: 新增预览接口数据动态获取功能

This commit is contained in:
MTrun 2022-03-24 14:19:07 +08:00
parent 0d1c24c536
commit 66373a427b
16 changed files with 82 additions and 33 deletions

View File

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

View File

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

View File

@ -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 }
}

View File

@ -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)

View File

@ -1,6 +1,7 @@
import { ref } from 'vue'
import throttle from 'lodash/throttle'
// * 屏幕缩放适配
export const usePreviewScale = (
width: number,
height: number,

View File

@ -5,7 +5,7 @@ import { borderRadius } from '@/settings/designSetting'
import { toLight } from '@/utils'
/**
*
* *
*/
export const useThemeOverridesHook = () => {
const designStore = useDesignStore()

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -128,6 +128,10 @@ export const openGiteeSourceCode = () => {
openNewWindow(giteeSourceCodePath)
}
export const isPreview = () => {
return document.location.hash.includes('preview')
}
/**
* *
* @returns object

View File

@ -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

View File

@ -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>