From f21e459ff517ce842a6b4112ed098fb2c623140b Mon Sep 17 00:00:00 2001 From: huanghao1412 Date: Thu, 18 Jan 2024 11:48:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=9A=E7=94=A8=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 2 +- package.json | 1 + src/api/path/business.api.ts | 5 +- src/hooks/index.ts | 3 +- src/hooks/useChartCommonData.hook.ts | 145 +++++++++++++++++ .../Charts/Bars/BarCommon/index.vue | 77 ++++----- .../Charts/Bars/BarCrossrange/index.vue | 54 +++---- src/packages/components/Charts/Bars/index.ts | 4 +- .../Charts/Lines/LineCommon/index.vue | 54 +++---- .../Lines/LineGradientSingle/config.vue | 2 +- .../Charts/Lines/LineGradientSingle/index.ts | 2 +- .../Charts/Lines/LineGradientSingle/index.vue | 6 +- .../Charts/Lines/LineLinearSingle/config.vue | 4 +- .../Charts/Lines/LineLinearSingle/index.ts | 2 +- .../Charts/Lines/LineLinearSingle/index.vue | 6 +- src/packages/components/Charts/Lines/index.ts | 4 +- .../Charts/Pies/PieCommon/index.vue | 16 +- src/packages/index.d.ts | 4 +- src/packages/public/publicConfig.ts | 13 +- .../chartEditStore/chartEditStore.d.ts | 20 +++ .../components/ChartDataPointHistory.d.ts | 44 ++++++ .../components/ChartDataPointHistory.vue | 146 ++++++++++++++++++ .../components/ChartDataV2/index.d.ts | 110 +++++++++++++ .../components/ChartDataV2/index.vue | 37 +++++ .../chart/ContentConfigurations/index.vue | 2 +- .../ContentHeader/headerLeftBtn/index.vue | 10 +- src/views/chart/hooks/useSync.hook.ts | 8 +- src/views/chart/index.vue | 1 - 28 files changed, 658 insertions(+), 124 deletions(-) create mode 100644 src/hooks/useChartCommonData.hook.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartDataV2/components/ChartDataPointHistory.d.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartDataV2/components/ChartDataPointHistory.vue create mode 100644 src/views/chart/ContentConfigurations/components/ChartDataV2/index.d.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue diff --git a/.env b/.env index 6b27d741..0115e716 100644 --- a/.env +++ b/.env @@ -2,7 +2,7 @@ VITE_DEV_PORT = '8080' # development path -VITE_DEV_PATH = 'http://192.168.0.34:8024' +VITE_DEV_PATH = 'http://192.168.0.34:11887' # VITE_DEV_PATH = 'http://192.168.0.120:3001' # production path diff --git a/package.json b/package.json index 142b68e5..204cbd34 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "moment": "^2.29.4", "monaco-editor": "^0.33.0", "naive-ui": "2.34.3", + "nanoid": "^5.0.4", "pinia": "^2.0.13", "screenfull": "^6.0.1", "three": "^0.145.0", diff --git a/src/api/path/business.api.ts b/src/api/path/business.api.ts index c04c209e..868b5650 100644 --- a/src/api/path/business.api.ts +++ b/src/api/path/business.api.ts @@ -5,11 +5,12 @@ import { httpErrorHandle } from '@/utils' import moment from 'moment' export function getToken() { + // 为了开发时只单独展示goview 需要localStorage const storage_access_token = localStorage.getItem('access_token_obj') if(storage_access_token) { const obj = JSON.parse(storage_access_token) const { access_token, expiration } = obj - if(expiration >= moment().format('x')) return access_token + if(expiration >= Number(moment().format('x'))) return access_token } let queryStr = window.location.href queryStr = queryStr.split('?')[1] @@ -20,7 +21,7 @@ export function getToken() { }) const obj = { access_token: query.access_token, - expiration: 86400000 + moment().format('x') + expiration: 86400000 + Number(moment().format('x')) } if(query.access_token) localStorage.setItem('access_token_obj', JSON.stringify(obj)) return query.access_token diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 7e6b1cc9..e24f3e68 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -6,4 +6,5 @@ export * from '@/hooks/useSystemInit.hook' export * from '@/hooks/useChartDataPondFetch.hook' export * from '@/hooks/useLifeHandler.hook' export * from '@/hooks/useLang.hook' -export * from '@/hooks/useChartInteract.hook' \ No newline at end of file +export * from '@/hooks/useChartInteract.hook' +export * from '@/hooks/useChartCommonData.hook' diff --git a/src/hooks/useChartCommonData.hook.ts b/src/hooks/useChartCommonData.hook.ts new file mode 100644 index 00000000..4b6df83c --- /dev/null +++ b/src/hooks/useChartCommonData.hook.ts @@ -0,0 +1,145 @@ +import type VChart from 'vue-echarts' +import { setOption } from "@/packages/public"; +import { ref, toRefs, watch } from "vue"; +import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' +import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore"; +import { intervalUnitHandle, newFunctionHandle, isPreview } from "@/utils"; +import { publicInterface } from "@/api/path"; +import { DateTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' +import moment from 'moment' +import { commonDataType } from '@/store/modules/chartEditStore/chartEditStore.d' +import { cloneDeep } from 'lodash' + +// 获取类型 +type ChartEditStoreType = typeof useChartEditStore + +/** + * setdata 数据监听与更改 + * @param targetComponent + * @param useChartEditStore 若直接引会报错，只能动态传递 + * @param updateCallback 自定义更新函数 + */ +export const useChartCommonData = ( + targetComponent: CreateComponentType, + useChartEditStore: ChartEditStoreType, +) => { + const vChartRef = ref(null) + let fetchInterval: any = 0 + + // 组件类型 + const { chartFrame } = targetComponent.chartConfig + + // eCharts 组件配合 vChart 库更新方式 + const echartsUpdateHandle = (dataset: any) => { + if (chartFrame === ChartFrameEnum.ECHARTS) { + // if (vChartRef.value) { + // setOption(vChartRef.value, { dataset: dataset }) + // } + if(targetComponent.option){ + let seriesItem = cloneDeep(targetComponent.option.series[0]) + let series = [] + targetComponent.option.series.splice(0) + if(dataset.dimensions.length - 1) { + for(let i = 0; i < dataset.dimensions.length - 1; i++) { + series.push(cloneDeep(seriesItem)) + } + } + else { + series = [seriesItem] + } + Object.assign(targetComponent.option, { + series, + dataset, + }) + } + } + } + + const requestIntervalFn = () => { + const chartEditStore = useChartEditStore() + + // 全局数据 + const { + requestIntervalUnit: globalUnit, + requestInterval: globalRequestInterval + } = toRefs(chartEditStore.getRequestGlobalConfig) + + // 目标组件 + const { + requestIntervalUnit: targetUnit, + requestInterval: targetInterval + } = toRefs(targetComponent.request) + + try { + clearInterval(fetchInterval) + + const fetchFn = async () => { + let { methods, dems_device_points_uid, dateType, enable } = targetComponent.commonData as commonDataType + if(!enable) return + let start_time: string = '', end_time: string = '', duration: number = 0 + const formatter = 'yyyy-MM-DD HH:mm:ss' + if(dateType === DateTypeEnum.DAY) { + start_time = moment().subtract(1, 'd').format(formatter) + end_time = moment().format(formatter) + duration = 60 * 60 + } + else if(dateType === DateTypeEnum.MONTH) { + start_time = moment().subtract(1, 'M').format(formatter) + end_time = moment().format(formatter) + duration = 24 * 60 * 60 + } + else if(dateType === DateTypeEnum.YEAR) { + start_time = moment().subtract(1, 'y').format(formatter) + end_time = moment().format(formatter) + duration = 30 * 24 * 60 * 60 + } + + const query = { + methods, + dems_device_points_uid, + start_time, + end_time, + duration, + } + const res = await publicInterface('/dcim/system/custom_large_screen', 'row_reports', query) + if (res) { + try { + const { data } = res + echartsUpdateHandle(data.length ? data[0] : { dimensions: [], source: [] }) + } catch (error) { + console.error(error) + } + } + } + // 普通初始化与组件交互处理监听 + watch( + () => targetComponent.commonData, + () => { + fetchFn() + }, + { + immediate: true, + deep: true + } + ) + + // 定时时间 + const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value + // 单位 + const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value + // 开启轮询 + if (time) { + fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) + } else { + fetchFn() + } + } catch (error) { + console.log(error) + } + } + requestIntervalFn() + if(!isPreview()) { + clearInterval(fetchInterval) + } + return { vChartRef } +} diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue index d4daecbc..264f9768 100644 --- a/src/packages/components/Charts/Bars/BarCommon/index.vue +++ b/src/packages/components/Charts/Bars/BarCommon/index.vue @@ -14,7 +14,7 @@ import { CanvasRenderer } from 'echarts/renderers' import { BarChart } from 'echarts/charts' import config, { includes, seriesItem } from './config' import { mergeTheme } from '@/packages/public/chart' -import { useChartDataFetch } from '@/hooks' +import { useChartDataFetch, useChartCommonData } from '@/hooks' import { CreateComponentType } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' @@ -48,42 +48,43 @@ const option = computed(() => { }) // dataset 无法变更条数的补丁 -watch( - () => props.chartConfig.option.dataset, - (newData: { dimensions: any }, oldData) => { - try { - if (!isObject(newData) || !('dimensions' in newData)) return - if (Array.isArray(newData?.dimensions)) { - const seriesArr = [] - // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰 - // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰 - const oldDimensions = Array.isArray(oldData?.dimensions)&&oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1; - const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1; - const dimensionsGap = newDimensions - oldDimensions; - if (dimensionsGap < 0) { - props.chartConfig.option.series.splice(newDimensions - 1) - } else if (dimensionsGap > 0) { - if(!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length ) { - props.chartConfig.option.series=[] - } - for (let i = 0; i < dimensionsGap; i++) { - seriesArr.push(cloneDeep(seriesItem)) - } - props.chartConfig.option.series.push(...seriesArr) - } - replaceMergeArr.value = ['series'] - nextTick(() => { - replaceMergeArr.value = [] - }) - } - } catch (error) { - console.log(error) - } - }, - { - deep: false - } -) +// watch( +// () => props.chartConfig.option.dataset, +// (newData: { dimensions: any }, oldData) => { +// try { +// if (!isObject(newData) || !('dimensions' in newData)) return +// if (Array.isArray(newData?.dimensions)) { +// const seriesArr = [] +// // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰 +// // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰 +// const oldDimensions = Array.isArray(oldData?.dimensions)&&oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1; +// const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1; +// const dimensionsGap = newDimensions - oldDimensions; +// if (dimensionsGap < 0) { +// props.chartConfig.option.series.splice(newDimensions - 1) +// } else if (dimensionsGap > 0) { +// if(!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length ) { +// props.chartConfig.option.series=[] +// } +// for (let i = 0; i < dimensionsGap; i++) { +// seriesArr.push(cloneDeep(seriesItem)) +// } +// props.chartConfig.option.series.push(...seriesArr) +// } +// replaceMergeArr.value = ['series'] +// nextTick(() => { +// replaceMergeArr.value = [] +// }) +// } +// } catch (error) { +// console.log(error) +// } +// }, +// { +// deep: false +// } +// ) -const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) +// const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) +const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore) diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue index 8f85f5f2..d7eac2f0 100644 --- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue +++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue @@ -21,7 +21,7 @@ import { CanvasRenderer } from 'echarts/renderers' import { BarChart } from 'echarts/charts' import { mergeTheme } from '@/packages/public/chart' import config, { includes, seriesItem } from './config' -import { useChartDataFetch } from '@/hooks' +import {useChartCommonData, useChartDataFetch} from '@/hooks' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' @@ -54,30 +54,32 @@ const option = computed(() => { }) // dataset 无法变更条数的补丁 -watch( - () => props.chartConfig.option.dataset, - (newData: { dimensions: any }, oldData) => { - try { - if (!isObject(newData) || !('dimensions' in newData)) return - if (Array.isArray(newData?.dimensions)) { - const seriesArr = [] - for (let i = 0; i < newData.dimensions.length - 1; i++) { - seriesArr.push(cloneDeep(seriesItem)) - } - replaceMergeArr.value = ['series'] - props.chartConfig.option.series = seriesArr - nextTick(() => { - replaceMergeArr.value = [] - }) - } - } catch (error) { - console.log(error) - } - }, - { - deep: false - } -) +// watch( +// () => props.chartConfig.option.dataset, +// (newData: { dimensions: any }, oldData) => { +// try { +// if (!isObject(newData) || !('dimensions' in newData)) return +// if (Array.isArray(newData?.dimensions)) { +// const seriesArr = [] +// for (let i = 0; i < newData.dimensions.length - 1; i++) { +// seriesArr.push(cloneDeep(seriesItem)) +// } +// replaceMergeArr.value = ['series'] +// props.chartConfig.option.series = seriesArr +// nextTick(() => { +// replaceMergeArr.value = [] +// }) +// } +// } catch (error) { +// console.log(error) +// } +// }, +// { +// deep: false +// } +// ) + +// const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) +const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore) -const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) diff --git a/src/packages/components/Charts/Bars/index.ts b/src/packages/components/Charts/Bars/index.ts index 39c68f68..540a0d07 100644 --- a/src/packages/components/Charts/Bars/index.ts +++ b/src/packages/components/Charts/Bars/index.ts @@ -1,6 +1,6 @@ import { BarCommonConfig } from './BarCommon/index' import { BarCrossrangeConfig } from './BarCrossrange/index' // import { CapsuleChartConfig } from './CapsuleChart/index' -import { BarLineConfig } from './BarLine/index' +// import { BarLineConfig } from './BarLine/index' -export default [BarCommonConfig, BarCrossrangeConfig, BarLineConfig] +export default [BarCommonConfig, BarCrossrangeConfig] diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue index c2163eb7..6d27292d 100644 --- a/src/packages/components/Charts/Lines/LineCommon/index.vue +++ b/src/packages/components/Charts/Lines/LineCommon/index.vue @@ -23,7 +23,7 @@ import { LineChart } from 'echarts/charts' import config, { includes, seriesItem } from './config' import { mergeTheme } from '@/packages/public/chart' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { useChartDataFetch } from '@/hooks' +import {useChartCommonData, useChartDataFetch} from '@/hooks' import { isPreview } from '@/utils' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import isObject from 'lodash/isObject' @@ -54,30 +54,32 @@ const option = computed(() => { }) // dataset 无法变更条数的补丁 -watch( - () => props.chartConfig.option.dataset, - (newData: { dimensions: any }, oldData) => { - try { - if (!isObject(newData) || !('dimensions' in newData)) return - if (Array.isArray(newData?.dimensions)) { - const seriesArr = [] - for (let i = 0; i < newData.dimensions.length - 1; i++) { - seriesArr.push(seriesItem) - } - replaceMergeArr.value = ['series'] - props.chartConfig.option.series = seriesArr - nextTick(() => { - replaceMergeArr.value = [] - }) - } - } catch (error) { - console.log(error) - } - }, - { - deep: false - } -) +// watch( +// () => props.chartConfig.option.dataset, +// (newData: { dimensions: any }, oldData) => { +// try { +// if (!isObject(newData) || !('dimensions' in newData)) return +// if (Array.isArray(newData?.dimensions)) { +// const seriesArr = [] +// for (let i = 0; i < newData.dimensions.length - 1; i++) { +// seriesArr.push(seriesItem) +// } +// replaceMergeArr.value = ['series'] +// props.chartConfig.option.series = seriesArr +// nextTick(() => { +// replaceMergeArr.value = [] +// }) +// } +// } catch (error) { +// console.log(error) +// } +// }, +// { +// deep: false +// } +// ) + +// const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) +const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore) -const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue index 60250083..5c1244d6 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue +++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue @@ -1,7 +1,7 @@