From 6cd2a069741adaf239ebf4c920713b6fb77613e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sat, 2 Apr 2022 11:34:54 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=9B=B4=E6=96=B0=EF=BC=8C=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=9B=B4=E6=96=B0=20hook=20=E5=87=BD?= =?UTF-8?q?=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/mock/index.ts | 26 +++-- src/api/mock/test.mock.ts | 48 ++++++--- .../LoadingSkeleton.vue | 0 .../{LoadingComponent => GoLoading}/index.ts | 4 +- .../{LoadingComponent => GoLoading}/index.vue | 0 src/hooks/useChartDataFetch.hook.ts | 87 +++++++++------ .../Tables/Tables/TableList/config.ts | 5 +- .../Tables/Tables/TableList/config.vue | 6 -- .../Tables/Tables/TableList/index.vue | 101 ++++++++++-------- src/plugins/customComponents.ts | 4 +- src/settings/chartThemes/global.theme.json | 5 +- src/utils/componets.ts | 2 +- .../components/ChartDataAjax/index.vue | 24 +++-- .../ChartDataMatchingAndShow/index.vue | 33 ++++-- 14 files changed, 210 insertions(+), 135 deletions(-) rename src/components/{LoadingComponent => GoLoading}/LoadingSkeleton.vue (100%) rename src/components/{LoadingComponent => GoLoading}/index.ts (85%) rename src/components/{LoadingComponent => GoLoading}/index.vue (100%) diff --git a/src/api/mock/index.ts b/src/api/mock/index.ts index bdafb70a..f387a4de 100644 --- a/src/api/mock/index.ts +++ b/src/api/mock/index.ts @@ -3,14 +3,22 @@ import { MockMethod } from 'vite-plugin-mock' import { RequestHttpEnum } from '@/enums/httpEnum' // 单个X数据 -export const mockDataUrl = '/mock/mockData' +export const chartDataUrl = '/mock/chartData' +export const rankListUrl = '/mock/RankList' -const mockObject: MockMethod[] =[{ - // 正则 - // url: /\/mock\/mockData(|\?\S*)$/, - url: '/mock/mockData', - method: RequestHttpEnum.GET, - response: () => test.featchMockData -}] +const mockObject: MockMethod[] = [ + { + // 正则 + // url: /\/mock\/mockData(|\?\S*)$/, + url: '/mock/chartData', + method: RequestHttpEnum.GET, + response: () => test.fetchMockData, + }, + { + url: '/mock/rankList', + method: RequestHttpEnum.GET, + response: () => test.fetchRankList, + }, +] -export default mockObject \ No newline at end of file +export default mockObject diff --git a/src/api/mock/test.mock.ts b/src/api/mock/test.mock.ts index 2590e072..0a57dc55 100644 --- a/src/api/mock/test.mock.ts +++ b/src/api/mock/test.mock.ts @@ -1,42 +1,62 @@ export default { - // 轮播图 - featchMockData: { + // 图表 + fetchMockData: { status: 200, - msg: "请求成功", + msg: '请求成功', data: { - dimensions: ["product", "dataOne", "dataTwo"], + dimensions: ['product', 'dataOne', 'dataTwo'], source: [ { - 'product': '@name', + product: '@name', 'dataOne|100-900': 3, 'dataTwo|100-900': 3, }, { - 'product': '@name', + product: '@name', 'dataOne|100-900': 3, 'dataTwo|100-900': 3, }, { - 'product': '@name', + product: '@name', 'dataOne|100-900': 3, 'dataTwo|100-900': 3, }, { - 'product': '@name', + product: '@name', 'dataOne|100-900': 3, 'dataTwo|100-900': 3, }, { - 'product': '@name', + product: '@name', 'dataOne|100-900': 3, 'dataTwo|100-900': 3, }, { - 'product': '@name', + product: '@name', 'dataOne|100-900': 3, 'dataTwo|100-900': 3, }, - ] - } - } -} \ No newline at end of file + ], + }, + }, + // 排名列表 + fetchRankList: { + status: 200, + msg: '请求成功', + data: [ + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + { name: '@name', 'value|100-900': 5 }, + ], + }, +} diff --git a/src/components/LoadingComponent/LoadingSkeleton.vue b/src/components/GoLoading/LoadingSkeleton.vue similarity index 100% rename from src/components/LoadingComponent/LoadingSkeleton.vue rename to src/components/GoLoading/LoadingSkeleton.vue diff --git a/src/components/LoadingComponent/index.ts b/src/components/GoLoading/index.ts similarity index 85% rename from src/components/LoadingComponent/index.ts rename to src/components/GoLoading/index.ts index fbda4abe..0320b59c 100644 --- a/src/components/LoadingComponent/index.ts +++ b/src/components/GoLoading/index.ts @@ -1,10 +1,10 @@ import type { App } from 'vue' -import LoadingComponent from './index.vue' +import GoLoading from './index.vue' import AsyncLoading from './index.vue' import AsyncSkeletonLoading from './LoadingSkeleton.vue' // 正常组件 -export { LoadingComponent } +export { GoLoading } // 异步 AsyncLoading.install = (app: App): void => { diff --git a/src/components/LoadingComponent/index.vue b/src/components/GoLoading/index.vue similarity index 100% rename from src/components/LoadingComponent/index.vue rename to src/components/GoLoading/index.vue diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index d336fe7b..98bcb7ac 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -1,51 +1,76 @@ 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 { CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { RequestDataTypeEnum } from '@/enums/httpEnum' import { isPreview } from '@/utils' +// 获取类型 type ChartEditStoreType = typeof useChartEditStore /** - * 图表针对 setdata 数据监听与更改 - * @param chartConfig + * setdata 数据监听与更改 + * @param targetComponent + * @param useChartEditStore 若直接引会报错，只能动态传递 + * @param updateCallback 自定义更新函数 */ -export const useChartDataFetch = (chartConfig: CreateComponentType, useChartEditStore: ChartEditStoreType) => { +export const useChartDataFetch = ( + targetComponent: CreateComponentType, + useChartEditStore: ChartEditStoreType, + updateCallback?: (...args: any) => any +) => { const vChartRef = ref(null) let fetchInterval: any = 0 - isPreview() && watchEffect(() => { - clearInterval(fetchInterval) + isPreview() && + watchEffect(() => { + clearInterval(fetchInterval) - const chartEditStore = useChartEditStore() - const { requestOriginUrl, requestInterval } = toRefs( - chartEditStore.getRequestGlobalConfig - ) - const { requestDataType, requestHttpType, requestUrl } = toRefs( - chartConfig.data - ) - if (requestDataType.value !== RequestDataTypeEnum.AJAX) return - // 处理地址 - if (requestUrl?.value && requestInterval.value > 0) { - // requestOriginUrl 允许为空 - const completePath = - requestOriginUrl && requestOriginUrl.value + requestUrl.value - if (!completePath) return + const chartEditStore = useChartEditStore() + const { requestOriginUrl, requestInterval } = toRefs( + chartEditStore.getRequestGlobalConfig + ) + const { requestDataType, requestHttpType, requestUrl } = toRefs( + targetComponent.data + ) + if (requestDataType.value !== RequestDataTypeEnum.AJAX) return + // 处理地址 + if (requestUrl?.value && requestInterval.value > 0) { + // requestOriginUrl 允许为空 + const completePath = + requestOriginUrl && requestOriginUrl.value + requestUrl.value + if (!completePath) return - fetchInterval = setInterval(async () => { - const res = await http(requestHttpType.value)(completePath || '', {}) - if (res.data) { - nextTick(() => { - if(vChartRef.value) { - vChartRef.value.setOption({dataset: res.data}) + fetchInterval = setInterval(async () => { + const res:any = await http(requestHttpType.value)(completePath || '', {}) + if (res.data) { + // 是否是 Echarts + const isECharts = + targetComponent.chartConfig.package === + PackagesCategoryEnum.CHARTS + + try { + if (isECharts) { + nextTick(() => { + if (vChartRef.value) { + vChartRef.value.setOption({ dataset: res.data }) + } + }) + } else { + // 若遵守规范使用 datase 作为数据 key，则省自动赋值数据 + targetComponent.option.dataset = res.data + } + if (updateCallback) { + updateCallback(res.data) + } + } catch (error) { + console.error(error) } - }) - } - }, requestInterval.value * 1000) - } - }) + } + }, requestInterval.value * 1000) + } + }) return { vChartRef } } diff --git a/src/packages/components/Tables/Tables/TableList/config.ts b/src/packages/components/Tables/Tables/TableList/config.ts index 75fbff2c..49ccc5be 100644 --- a/src/packages/components/Tables/Tables/TableList/config.ts +++ b/src/packages/components/Tables/Tables/TableList/config.ts @@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const option = { - data: dataJson, + // 数据 + dataset: dataJson, // 表行数 rowNum: 5, // 轮播时间 @@ -15,7 +16,7 @@ export const option = { // 自动排序 sort: true, color: '#1370fb', - textColor: '#ffffff', + textColor: '#CDD2F8FF', borderColor: '#1370fb80', carousel: 'single', // 格式化 diff --git a/src/packages/components/Tables/Tables/TableList/config.vue b/src/packages/components/Tables/Tables/TableList/config.vue index 6cee7d78..63659fda 100644 --- a/src/packages/components/Tables/Tables/TableList/config.vue +++ b/src/packages/components/Tables/Tables/TableList/config.vue @@ -24,12 +24,6 @@ placeholder="数值单位" > - - - - 自动排序 - - diff --git a/src/packages/components/Tables/Tables/TableList/index.vue b/src/packages/components/Tables/Tables/TableList/index.vue index 6516c4fb..3bde9378 100644 --- a/src/packages/components/Tables/Tables/TableList/index.vue +++ b/src/packages/components/Tables/Tables/TableList/index.vue @@ -15,11 +15,14 @@ ? status.mergedConfig.valueFormatter(item) : item.value }} - {{unit}} + {{ unit }}
-
+
@@ -32,6 +35,8 @@ import { PropType, onUnmounted, reactive, ref, toRefs, watch } from 'vue' import { CreateComponentType } from '@/packages/index.d' import cloneDeep from 'lodash/cloneDeep' import merge from 'lodash/merge' +import { useChartDataFetch } from '@/hooks' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' const props = defineProps({ chartConfig: { @@ -39,9 +44,10 @@ const props = defineProps({ required: true, }, }) - const { w, h } = toRefs(props.chartConfig.attr) -const { rowNum, unit, color, textColor, borderColor } = toRefs(props.chartConfig.option) +const { rowNum, unit, color, textColor, borderColor } = toRefs( + props.chartConfig.option +) const status = reactive({ mergedConfig: props.chartConfig.option, @@ -53,41 +59,15 @@ const status = reactive({ updater: 0, }) -const onResize = () => { - if (!status.mergedConfig) return - stopAnimation() - calcHeights(true) - animation(true) -} - -watch( - () => w.value, - () => { - onResize() - } -) -watch( - () => h.value, - () => { - onResize() - } -) -watch( - () => rowNum.value, - () => { - onResize() - } -) - const calcRowsData = () => { - let { data, rowNum, sort } = status.mergedConfig + let { dataset, rowNum, sort } = status.mergedConfig sort && - data.sort(({ value: a }, { value: b }) => { + dataset.sort(({ value: a }, { value: b }) => { if (a > b) return -1 if (a < b) return 1 if (a === b) return 0 }) - const value = data.map(({ value }) => value) + const value = dataset.map(({ value }) => value) const min = Math.min(...value) || 0 // abs of min const minAbs = Math.abs(min) @@ -95,25 +75,25 @@ const calcRowsData = () => { // abs of max const maxAbs = Math.abs(max) const total = max + minAbs - data = data.map((row, i) => ({ + dataset = dataset.map((row, i) => ({ ...row, ranking: i + 1, percent: ((row.value + minAbs) / total) * 100, })) - const rowLength = data.length + const rowLength = dataset.length if (rowLength > rowNum && rowLength < 2 * rowNum) { - data = [...data, ...data] + dataset = [...dataset, ...dataset] } - data = data.map((d, i) => ({ ...d, scroll: i })) - status.rowsData = data - status.rows = data + dataset = dataset.map((d, i) => ({ ...d, scroll: i })) + status.rowsData = dataset + status.rows = dataset } const calcHeights = (onresize = false) => { - const { rowNum, data } = status.mergedConfig + const { rowNum, dataset } = status.mergedConfig const avgHeight = h.value / rowNum status.avgHeight = avgHeight - if (!onresize) status.heights = new Array(data.length).fill(avgHeight) + if (!onresize) status.heights = new Array(dataset.length).fill(avgHeight) } const animation = async (start = false) => { @@ -147,13 +127,46 @@ const stopAnimation = () => { clearTimeout(status.animationHandler) } -const init = () => { +const onRestart = async () => { + if (!status.mergedConfig) return + stopAnimation() calcRowsData() - calcHeights() + calcHeights(true) animation(true) } -init() +onRestart() + +watch( + () => w.value, + () => { + onRestart() + } +) + +watch( + () => h.value, + () => { + onRestart() + } +) + +watch( + () => rowNum.value, + () => { + onRestart() + } +) + +// 数据更新 +watch( + () => props.chartConfig.option.dataset, + () => { + onRestart() + } +) + +useChartDataFetch(props.chartConfig, useChartEditStore) onUnmounted(() => { stopAnimation() diff --git a/src/plugins/customComponents.ts b/src/plugins/customComponents.ts index 484e113f..0fad1075 100644 --- a/src/plugins/customComponents.ts +++ b/src/plugins/customComponents.ts @@ -1,6 +1,6 @@ import type { App } from 'vue' import { GoSkeleton } from '@/components/GoSkeleton' -import { LoadingComponent } from '@/components/LoadingComponent' +import { GoLoading } from '@/components/GoLoading' import { SketchRule } from 'vue3-sketch-ruler' /** @@ -9,6 +9,6 @@ import { SketchRule } from 'vue3-sketch-ruler' */ export function setupCustomComponents(app: App) { app.component('GoSkeleton', GoSkeleton) - app.component('LoadingComponent', LoadingComponent) + app.component('GoLoading', GoLoading) app.component('SketchRule', SketchRule) } diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json index 44e20308..f7325bd6 100644 --- a/src/settings/chartThemes/global.theme.json +++ b/src/settings/chartThemes/global.theme.json @@ -78,8 +78,5 @@ "color": "#B9B8CE" } }, - "dataset": { - "dimensions": [""], - "source": [{}] - } + "dataset": null } \ No newline at end of file diff --git a/src/utils/componets.ts b/src/utils/componets.ts index 5f729052..6d07f94f 100644 --- a/src/utils/componets.ts +++ b/src/utils/componets.ts @@ -1,5 +1,5 @@ import { defineAsyncComponent, AsyncComponentLoader } from 'vue' -import { AsyncLoading, AsyncSkeletonLoading } from '@/components/LoadingComponent' +import { AsyncLoading, AsyncSkeletonLoading } from '@/components/GoLoading' /** * * 动态注册组件 diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue index 4fcc68d2..e2f7b778 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -20,13 +20,15 @@ - - 开发环境使用 mock 数据，请输入【 - - {{ mockDataUrl }} - - 】 - +
    + 开发环境使用 mock 数据，请输入 +
  • + 【图表】{{ chartDataUrl }} +
    • +
  • + 【表格】{{ rankListUrl }} +
    • +
- + @@ -17,7 +21,10 @@ 无 - + 匹配{{ item.result === 1 ? '成功' : '失败' }} @@ -27,7 +34,7 @@ - 数据需要符合 ECharts-setdata 规范 + ECharts 图表需符合 ECharts-setdata 数据规范 import { ref, computed, watch } from 'vue' -import { CreateComponentType } from '@/packages/index.d' +import { CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d' import { icon } from '@/plugins' import { DataResultEnum, TimelineTitleEnum } from '../../index.d' import { useFile } from '../../hooks/useFile.hooks' @@ -89,6 +96,11 @@ const dimensionsAndSource = ref() const { uploadFileListRef, customRequest, beforeUpload, download} = useFile(targetData) +// 是图表类型 +const isCharts = computed(()=> { + return targetData.value.chartConfig.package === PackagesCategoryEnum.CHARTS +}) + // 获取数据 const getSource = computed(() => { return JSON.stringify(source.value) @@ -128,17 +140,20 @@ const dimensionsAndSourceHandle = () => { watch(() => targetData.value?.option?.dataset, (newData) => { if (newData) { - source.value = newData.source - dimensions.value = newData.dimensions - dimensionsAndSource.value = dimensionsAndSourceHandle() + // 只有 Echarts 数据才有对应的格式 + source.value = isCharts.value ? newData.source : newData + if(isCharts.value) { + dimensions.value = newData.dimensions + dimensionsAndSource.value = dimensionsAndSourceHandle() + } } -}, { +},{ immediate: true })