feat: 通用组件增加数据

.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

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",

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

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'
+export * from '@/hooks/useChartInteract.hook'
+export * from '@/hooks/useChartCommonData.hook'

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<typeof VChart | null>(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 }
+}

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(
+// watch(
-  () => props.chartConfig.option.dataset,
+//   () => props.chartConfig.option.dataset,
-  (newData: { dimensions: any }, oldData) => {
+//   (newData: { dimensions: any }, oldData) => {
-    try {
+//     try {
-      if (!isObject(newData) || !('dimensions' in newData)) return
+//       if (!isObject(newData) || !('dimensions' in newData)) return
-      if (Array.isArray(newData?.dimensions)) {
+//       if (Array.isArray(newData?.dimensions)) {
-        const seriesArr = []
+//         const seriesArr = []
-        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+//         // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
-        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+//         // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
-        const oldDimensions = Array.isArray(oldData?.dimensions)&&oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1; 
+//         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 newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1;
-        const dimensionsGap = newDimensions - oldDimensions;
+//         const dimensionsGap = newDimensions - oldDimensions;
-        if (dimensionsGap < 0) {
+//         if (dimensionsGap < 0) {
-          props.chartConfig.option.series.splice(newDimensions - 1)
+//           props.chartConfig.option.series.splice(newDimensions - 1)
-        } else if (dimensionsGap > 0) {
+//         } else if (dimensionsGap > 0) {
-          if(!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length ) {
+//           if(!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length ) {
-              props.chartConfig.option.series=[]
+//               props.chartConfig.option.series=[]
-          }
+//           }
-          for (let i = 0; i < dimensionsGap; i++) {
+//           for (let i = 0; i < dimensionsGap; i++) {
-            seriesArr.push(cloneDeep(seriesItem))
+//             seriesArr.push(cloneDeep(seriesItem))
-          }
+//           }
-          props.chartConfig.option.series.push(...seriesArr)
+//           props.chartConfig.option.series.push(...seriesArr)
-        }
+//         }
-        replaceMergeArr.value = ['series']
+//         replaceMergeArr.value = ['series']
-        nextTick(() => {
+//         nextTick(() => {
-          replaceMergeArr.value = []
+//           replaceMergeArr.value = []
-        })
+//         })
-      }
+//       }
-    } catch (error) {
+//     } catch (error) {
-      console.log(error)
+//       console.log(error)
-    }
+//     }
-  },
+//   },
-  {
+//   {
-    deep: false
+//     deep: false
-  }
+//   }
-)
+// )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+// const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore)
 </script>

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(
+// watch(
-  () => props.chartConfig.option.dataset,
+//   () => props.chartConfig.option.dataset,
-  (newData: { dimensions: any }, oldData) => {
+//   (newData: { dimensions: any }, oldData) => {
-    try {
+//     try {
-      if (!isObject(newData) || !('dimensions' in newData)) return
+//       if (!isObject(newData) || !('dimensions' in newData)) return
-      if (Array.isArray(newData?.dimensions)) {
+//       if (Array.isArray(newData?.dimensions)) {
-        const seriesArr = []
+//         const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
+//         for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(cloneDeep(seriesItem))
+//           seriesArr.push(cloneDeep(seriesItem))
-        }
+//         }
-        replaceMergeArr.value = ['series']
+//         replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
+//         props.chartConfig.option.series = seriesArr
-        nextTick(() => {
+//         nextTick(() => {
-          replaceMergeArr.value = []
+//           replaceMergeArr.value = []
-        })
+//         })
-      }
+//       }
-    } catch (error) {
+//     } catch (error) {
-      console.log(error)
+//       console.log(error)
-    }
+//     }
-  },
+//   },
-  {
+//   {
-    deep: false
+//     deep: false
-  }
+//   }
-)
+// )
+
+// const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore)
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

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]

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(
+// watch(
-  () => props.chartConfig.option.dataset,
+//   () => props.chartConfig.option.dataset,
-  (newData: { dimensions: any }, oldData) => {
+//   (newData: { dimensions: any }, oldData) => {
-    try {
+//     try {
-      if (!isObject(newData) || !('dimensions' in newData)) return
+//       if (!isObject(newData) || !('dimensions' in newData)) return
-      if (Array.isArray(newData?.dimensions)) {
+//       if (Array.isArray(newData?.dimensions)) {
-        const seriesArr = []
+//         const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
+//         for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+//           seriesArr.push(seriesItem)
-        }
+//         }
-        replaceMergeArr.value = ['series']
+//         replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
+//         props.chartConfig.option.series = seriesArr
-        nextTick(() => {
+//         nextTick(() => {
-          replaceMergeArr.value = []
+//           replaceMergeArr.value = []
-        })
+//         })
-      }
+//       }
-    } catch (error) {
+//     } catch (error) {
-      console.log(error)
+//       console.log(error)
-    }
+//     }
-  },
+//   },
-  {
+//   {
-    deep: false
+//     deep: false
-  }
+//   }
-)
+// )
+
+// const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore)
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Lines/LineGradientSingle/config.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
-  <CollapseItem v-for="(item, index) in seriesList" :key="index" name="单折线面积图" :expanded="true">
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线面积图-${index + 1}`" :expanded="true">
     <SettingItemBox name="线条">
       <SettingItem name="宽度">
         <n-input-number

src/packages/components/Charts/Lines/LineGradientSingle/index.ts

@@ -5,7 +5,7 @@ export const LineGradientSingleConfig: ConfigType = {
   key: 'LineGradientSingle',
   chartKey: 'VLineGradientSingle',
   conKey: 'VCLineGradientSingle',
-  title: '单折线渐变面积图',
+  title: '折线渐变面积图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -15,7 +15,7 @@ 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'
+import {useChartCommonData, useChartDataFetch} from '@/hooks'
 import { isPreview, colorGradientCustomMerge} from '@/utils'
 
 const props = defineProps({
@@ -82,5 +82,7 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+// const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore)
+
 </script>

src/packages/components/Charts/Lines/LineLinearSingle/config.vue

@@ -4,7 +4,7 @@
   <CollapseItem
     v-for="(item, index) in seriesList"
     :key="index"
-    :name="`样式`"
+    :name="`折线图-${index + 1}`"
     :expanded="true"
   >
     <SettingItemBox name="线条">
@@ -58,7 +58,7 @@
           v-model:value="item.lineStyle.shadowColor"
       ></n-color-picker>
       </SettingItem>
-      
+
     </SettingItemBox>
     <SettingItemBox name="设置">
      <SettingItem name="阴影">

src/packages/components/Charts/Lines/LineLinearSingle/index.ts

@@ -5,7 +5,7 @@ export const LineLinearSingleConfig: ConfigType = {
   key: 'LineLinearSingle',
   chartKey: 'VLineLinearSingle',
   conKey: 'VCLineLinearSingle',
-  title: '单折线渐变图',
+  title: '折线渐变图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,

src/packages/components/Charts/Lines/LineLinearSingle/index.vue

@@ -15,7 +15,7 @@ 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'
+import {useChartCommonData, useChartDataFetch} from '@/hooks'
 import { isPreview, colorGradientCustomMerge } from '@/utils'
 
 const props = defineProps({
@@ -79,5 +79,7 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+// const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore)
+
 </script>

src/packages/components/Charts/Lines/index.ts

@@ -2,6 +2,6 @@
 import { LineCommonConfig } from './LineCommon/index'
 import { LineLinearSingleConfig } from './LineLinearSingle/index'
 import { LineGradientSingleConfig } from './LineGradientSingle/index'
-import { LineGradientsConfig } from './LineGradients/index'
+// import { LineGradientsConfig } from './LineGradients/index'
 
-export default [LineCommonConfig, LineLinearSingleConfig, LineGradientSingleConfig, LineGradientsConfig]
+export default [LineCommonConfig, LineLinearSingleConfig, LineGradientSingleConfig]

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -20,7 +20,7 @@ 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'
+import {useChartCommonData, useChartDataFetch} from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
@@ -133,12 +133,14 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+// const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
-  clearPieInterval()
+//   clearPieInterval()
-  if (props.chartConfig.option.isCarousel) {
+//   if (props.chartConfig.option.isCarousel) {
-    addPieInterval(newData)
+//     addPieInterval(newData)
-  }
+//   }
-})
+// })
+const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore)
+
 
 onMounted(() => {
   seriesDataMaxLength = dataJson.source.length

src/packages/index.d.ts

@@ -2,6 +2,7 @@ import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsT
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import {CustomComponentsList} from "@/packages/components/CustomComponents/index";
+import { commonDataType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 export enum ChartFrameEnum {
   // 支持 dataset 的 echarts 框架
@@ -143,7 +144,8 @@ export interface PublicConfigType {
     overFlowHidden?: boolean
   }
   filter?: string
-  customData?: { [key:string]: any },
+  commonData?: commonDataType
+  customData?: { [key: string]: any }
   status: StatusType
   interactActions?: InteractActionsType[]
   events: {

src/packages/public/publicConfig.ts

@@ -1,5 +1,5 @@
 import { getUUID } from '@/utils'
-import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestConfigType, commonDataType, DateTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { groupTitle } from '@/settings/designSetting'
 import { BaseEvent, EventLife } from '@/enums/eventEnum'
 import {
@@ -23,7 +23,7 @@ export const requestConfig: RequestConfigType = {
   requestDataType: RequestDataTypeEnum.STATIC,
   requestHttpType: RequestHttpEnum.GET,
   requestUrl: '',
-  requestInterval: undefined,
+  requestInterval: 15,
   requestIntervalUnit: RequestHttpIntervalEnum.SECOND,
   requestContentType: RequestContentTypeEnum.DEFAULT,
   requestParamsBodyType: RequestBodyEnum.NONE,
@@ -46,6 +46,13 @@ export const requestConfig: RequestConfigType = {
   }
 }
 
+const commonData: commonDataType = {
+  enable: false,
+  methods: [],
+  dems_device_points_uid: [],
+  dateType: DateTypeEnum.DAY
+}
+
 // 单实例类
 export class PublicConfigClass implements PublicConfigType {
   public id = getUUID()
@@ -95,6 +102,8 @@ export class PublicConfigClass implements PublicConfigType {
   public request = cloneDeep(requestConfig)
   // 数据过滤
   public filter: undefined | string = undefined
+  // 通用数据 与 自定义数据对应
+  public commonData = cloneDeep(commonData)
   // 自定义数据 configData组件会用到
   public customData = {}
   // 事件

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -238,6 +238,26 @@ export interface RequestConfigType extends RequestPublicConfigType {
   }
 }
 
+export enum MethodsTypeEnum {
+  AVG = 'avg',
+  MIN = 'min',
+  MAX = 'max'
+}
+
+export enum DateTypeEnum {
+  DAY = 'day',
+  MONTH = 'month',
+  YEAR = 'year'
+}
+
+// 通用组件数据
+export interface commonDataType {
+  enable: boolean
+  methods: MethodsTypeEnum[]
+  dems_device_points_uid: string[]
+  dateType: DateTypeEnum
+}
+
 // Store 类型
 export interface ChartEditStoreType {
   [ChartEditStoreEnum.PROJECT_INFO]: ProjectInfoType

src/views/chart/ContentConfigurations/components/ChartDataV2/components/ChartDataPointHistory.d.ts

@@ -0,0 +1,44 @@
+import { DateTypeEnum, MethodsTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+type DateOptionsItemType = {
+    label: string,
+    value: DateTypeEnum,
+    duration: number
+}
+export const DateOptions: DateOptionsItemType[] = [
+    {
+        label: '近一天',
+        value: DateTypeEnum.DAY,
+        // 颗粒度为 秒数
+        // duration: 60 * 60
+    },
+    {
+        label: '近一月',
+        value: DateTypeEnum.MONTH,
+        // duration: 24 * 60 * 60
+    },
+    {
+        label: '近一年',
+        value: DateTypeEnum.YEAR,
+        // duration: 30 * 24 * 60 * 60
+    },
+]
+
+type MethodsOptionsItemType = {
+    label: string,
+    value: MethodsTypeEnum
+}
+export const MethodsOptions: MethodsOptionsItemType[] = [
+    {
+        label: '平均值',
+        value: MethodsTypeEnum.AVG
+    },
+    {
+        label: '最小值',
+        value: MethodsTypeEnum.MIN
+    },
+    {
+        label: '最大值',
+        value: MethodsTypeEnum.MAX
+    }
+]

src/views/chart/ContentConfigurations/components/ChartDataV2/components/ChartDataPointHistory.vue

@@ -0,0 +1,146 @@
+<template>
+  <setting-item-box name="测点历史记录" :alone="true">
+  </setting-item-box>
+  <setting-item-box name="启用数据" :alone="true">
+    <n-space justify="start">
+      <n-switch v-model:value="targetData.commonData.enable" />
+    </n-space>
+  </setting-item-box>
+  <setting-item-box name="时间" :alone="true">
+    <n-select v-model:value="targetData.commonData.dateType" :options="DateOptions" size="small"/>
+  </setting-item-box>
+  <setting-item-box name="统计方式" :alone="true">
+    <n-select multiple v-model:value="targetData.commonData.methods" :options="MethodsOptions" size="small" />
+  </setting-item-box>
+  <setting-item-box name="测点ID" :alone="true">
+    <n-space vertical>
+      <n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
+        <n-input
+          :value="item.value"
+          @update:value="v => handleChange(v, i)"
+          placeholder="请输入测点ID"
+          size="small"
+          clearable
+        />
+        <n-button @click="handleDelete(i)" circle size="tiny">
+          <template #icon>
+            <n-icon><CloseIcon /></n-icon>
+          </template>
+        </n-button>
+      </n-space>
+      <n-input v-model:value="templateValue" @blur="handleBlur" @keydown.enter="handleBlur" placeholder="请输入测点ID" size="small" clearable/>
+    </n-space>
+  </setting-item-box>
+  <setting-item-box name="更新间隔" :alone="true">
+    <n-input-group>
+      <n-input-number
+        v-model:value.trim="targetData.request.requestInterval"
+        min="1"
+        :show-button="false"
+        placeholder="请输入"
+        size="small"
+        style="flex: 1;"
+      >
+      </n-input-number>
+      <!-- 单位 -->
+      <n-select class="select-time-options" v-model:value="targetData.request.requestIntervalUnit" :options="selectTimeOptions" size="small" style="width: 80px"/>
+    </n-input-group>
+  </setting-item-box>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, reactive, toRefs } from 'vue'
+import type { Ref } from 'vue'
+import moment from 'moment'
+import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { useTargetData } from '../../hooks/useTargetData.hook'
+import { DateOptions, MethodsOptions } from './ChartDataPointHistory.d'
+import { nanoid } from 'nanoid'
+import { icon } from '@/plugins/icon'
+import { commonDataType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { selectTimeOptions } from '../index.d'
+
+const { CloseIcon } = icon.ionicons5
+
+const { targetData } = useTargetData()
+
+const templateValue = ref('')
+
+type computeIdsItemType = {
+  id: string,
+  value: string
+}
+
+const { commonData } = toRefs(targetData.value) as { commonData: Ref<commonDataType> }
+
+let computeIds: computeIdsItemType[] = reactive(commonData.value.dems_device_points_uid.map((_: string) => {
+  return {
+    id: nanoid(),
+    value: _
+  }
+}))
+
+// 用targetData.value.commonData.dems_device_points_uid 不用commonData.value.dems_device_points_uid
+// commonData.value.dems_device_points_uid好像丢失了响应性 晚点在研究
+watch(() => targetData.value.id, () => {
+  if(!targetData.value.commonData) return
+  let arr = targetData.value.commonData.dems_device_points_uid.map((_: string) => {
+    return {
+      id: nanoid(),
+      value: _
+    }
+  })
+  computeIds.splice(0, computeIds.length, ...arr)
+})
+
+watch(() => commonData.value.dems_device_points_uid, (v) => {
+  const length = commonData.value.dems_device_points_uid.length
+  if(length > computeIds.length) {
+    computeIds.push({
+      id: nanoid(),
+      value: v[length - 1]
+    })
+  }
+  else if(length < computeIds.length) {
+    for(let i = 0; i < computeIds.length; i++) {
+      if(i === computeIds.length - 1) {
+        computeIds.splice(-1)
+        break
+      }
+      else if(computeIds[i].value !== commonData.value.dems_device_points_uid[i]){
+        computeIds.splice(i, 1)
+        break
+      }
+    }
+  }
+  else {
+    computeIds.forEach((item, i) => {
+      item.value = commonData.value.dems_device_points_uid[i]
+    })
+  }
+}, {
+  deep: true
+})
+
+const handleBlur = () => {
+  if(targetData.value && commonData.value && templateValue.value) {
+    commonData.value.dems_device_points_uid.push(templateValue.value)
+    templateValue.value = ''
+  }
+}
+
+const handleChange = (v: string, i: number) => {
+  if(targetData.value && commonData.value) {
+    commonData.value.dems_device_points_uid[i] = v
+  }
+}
+
+const handleDelete = (i: number) => {
+  commonData.value.dems_device_points_uid.splice(i, 1)
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/chart/ContentConfigurations/components/ChartDataV2/index.d.ts

@@ -0,0 +1,110 @@
+import { RequestHttpEnum, RequestHttpIntervalEnum, RequestDataTypeEnum, SelectHttpTimeNameObj } from '@/enums/httpEnum'
+
+// 匹配结果
+export enum DataResultEnum {
+  NULL = 0,
+  SUCCESS = 1,
+  FAILURE = 2,
+}
+
+export enum TimelineTitleEnum {
+  FILTER = '数据过滤',
+  MAPPING = '数据映射',
+  CONTENT = '数据内容',
+}
+
+export enum SelectCreateDataEnum {
+  STATIC = '静态数据',
+  AJAX = '动态请求',
+  Pond = '公共接口',
+}
+
+export interface SelectCreateDataType {
+  label: SelectCreateDataEnum
+  value: RequestDataTypeEnum
+  disabled?: boolean
+}
+
+// ajax 请求类型
+export interface SelectHttpType {
+  label: RequestHttpEnum
+  value: RequestHttpEnum
+  disabled?: boolean
+  style?: object
+}
+
+// 类型选项
+export const selectTypeOptions: SelectHttpType[] = [
+  {
+    label: RequestHttpEnum.GET,
+    value: RequestHttpEnum.GET,
+    style: {
+      color: 'greenyellow',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.POST,
+    value: RequestHttpEnum.POST,
+    style: {
+      color: 'skyblue',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.PUT,
+    value: RequestHttpEnum.PUT,
+    style: {
+      color: 'goldenrod',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.PATCH,
+    value: RequestHttpEnum.PATCH,
+    style: {
+      color: 'violet',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.DELETE,
+    value: RequestHttpEnum.DELETE,
+    disabled: true,
+    style: {
+      fontWeight: 'bold'
+    }
+  },
+]
+
+// ajax 请求间隔
+export interface SelectHttpTimeType {
+  label: string
+  value: RequestHttpIntervalEnum
+  disabled?: boolean
+  unit: number
+}
+
+// 时间选项
+export const selectTimeOptions: SelectHttpTimeType[] = [
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.SECOND],
+    value: RequestHttpIntervalEnum.SECOND,
+    unit: 1000,
+  },
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.MINUTE],
+    value: RequestHttpIntervalEnum.MINUTE,
+    unit: 60000,
+  },
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.HOUR],
+    value: RequestHttpIntervalEnum.HOUR,
+    unit: 3600000,
+  },
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.DAY],
+    value: RequestHttpIntervalEnum.DAY,
+    unit: 86400000,
+  },
+]

src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="go-chart-configurations-data" v-if="targetData && !targetData.chartConfig.conDataKey">
+    <ChartDataPointHistory/>
+  </div>
+  <div v-if="targetData && targetData.chartConfig.conDataKey">
+    <component :is="targetData.chartConfig.conDataKey" :customData="targetData.customData" :request="targetData.request"></component>
+    <setting-item-box v-if="targetData?.customData?.showInterval" name="更新间隔" :alone="true">
+      <n-input-group>
+        <n-input-number
+          v-model:value.trim="targetData.request.requestInterval"
+          min="0"
+          :show-button="false"
+          placeholder="请输入"
+          size="small"
+          style="flex: 1;"
+        >
+        </n-input-number>
+        <!-- 单位 -->
+        <n-select class="select-time-options" v-model:value="targetData.request.requestIntervalUnit" :options="selectTimeOptions" size="small" style="width: 80px"/>
+      </n-input-group>
+    </setting-item-box>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ChartDataPointHistory from './components/ChartDataPointHistory.vue'
+import { computed } from 'vue'
+import { loadAsyncComponent } from '@/utils'
+import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { useTargetData } from '../hooks/useTargetData.hook'
+import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
+
+// const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
+
+const { targetData } = useTargetData()
+
+</script>

src/views/chart/ContentConfigurations/index.vue

@@ -80,7 +80,7 @@ const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = i
 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
 const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue'))
 const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
-const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
+const ChartData = loadAsyncComponent(() => import('./components/ChartDataV2/index.vue'))
 const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
 const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
 

src/views/chart/ContentHeader/headerLeftBtn/index.vue

@@ -36,7 +36,7 @@
       <n-tooltip placement="bottom" trigger="hover">
         <template #trigger>
           <div class="save-btn" >
-            <n-button size="small" type="primary" ghost @click="dataSyncUpdate()">
+            <n-button :loading="loading" size="small" type="primary" ghost @click="dataSyncUpdate()">
               <template #icon>
                 <n-icon>
                   <SaveIcon></SaveIcon>
@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, ref, Ref, reactive, computed } from 'vue'
+import { toRefs, Ref, reactive, computed, watch } from 'vue'
 import { renderIcon, goDialog, goHome } from '@/utils'
 import { icon } from '@/plugins'
 import { useRemoveKeyboard } from '../../hooks/useKeyboard.hook'
@@ -62,6 +62,7 @@ import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHis
 import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { SyncEnum } from "@/enums/editPageEnum";
 
 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
 const { SaveIcon } = icon.carbon
@@ -70,6 +71,11 @@ const { dataSyncUpdate } = useSync()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 const chartEditStore = useChartEditStore()
 const chartHistoryStore = useChartHistoryStore()
+const { saveStatus } = toRefs(chartEditStore.getEditCanvas)
+
+const loading = computed(() => {
+  return saveStatus.value === SyncEnum.START
+})
 
 interface ItemType<T> {
   key: T

src/views/chart/hooks/useSync.hook.ts

@@ -110,6 +110,7 @@ export const useSync = () => {
    * @returns
    */
   const updateComponent = async (projectData: ChartEditStorage, isReplace = false, changeId = false) => {
+    if (!projectData) return
     if (isReplace) {
       // 清除列表
       chartEditStore.componentList = []
@@ -252,7 +253,7 @@ export const useSync = () => {
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
     try {
       const res = await fetchProjectApi({ id: Number(fetchRouteParamsLocation()) })
-      if (res) {
+      if (res && res.errcode === ResultErrcode.SUCCESS) {
         // type dataType = {
         //   id: string
         //   projectName: string,
@@ -268,7 +269,7 @@ export const useSync = () => {
           }
           // 更新全局数据
           await updateComponent(JSONParse((res.data as any).content))
-          return
+          // return
         }else {
           chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
         }
@@ -279,8 +280,9 @@ export const useSync = () => {
       }
       chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
     } catch (error) {
+      console.log(error)
       chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-      // httpErrorHandle()
+      httpErrorHandle()
     }
   }
 

src/views/chart/index.vue

@@ -44,7 +44,6 @@ import { LayoutHeaderPro } from '@/layout/components/LayoutHeaderPro'
 import { useContextMenu } from './hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
-import { watch } from 'vue'
 
 const chartHistoryStoreStore = useChartHistoryStore()
 const chartEditStore = useChartEditStore()