fix: 设备一张图优化

.env

@@ -5,7 +5,7 @@ VITE_DEV_PORT = '8080'
 # VITE_DEV_PATH = 'http://192.168.0.34:11887'
 VITE_DEV_PATH = 'http://192.168.0.34:8025/'
 # VITE_DEV_PATH = 'http://192.168.0.120:3001'
-VITE_DEV_TOKEN = "1c476210-ddea-4f3f-bd82-832fd5df020d"
+VITE_DEV_TOKEN = "2e51947c-5d8d-42f2-99e8-8d841cff7a00"
 
 # production path
 # VITE_PRO_PATH = 'http://192.168.0.235:8177'

src/hooks/commonDataComponents/useAssetsClassRes.ts

@@ -19,31 +19,35 @@ const globalQueryParamsStore = useGlobalQueryParamsStore()
   }
   // 处理数据
   if(dataSource==='IT'){
-    
     const res  = await publicInterface('/dcim/asset','get_asset_overview_page_info_new', query)
     res!.data = {
     //  dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
      dimensions: ['品牌','data'],
-     source:res?.data.brand_count.slice(0,8).map((item: {})=>{
+     source:res?.data?.brand_count.slice(0,7).map((item: {})=>{
       return {
         '品牌':Object.keys(item)[0],
         data:Object.values(item)[0],
       }
      })
     }
+    console.log(res,'调用了吗')
+
     return res
   }else{
     const res  = await  publicInterface('/dcim/dems/device','get_dev_brand_count', query)
+
     res!.data = {
       //  dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
        dimensions: ['品牌','data'],
-       source:res?.data.slice(0,8).map((item: any)=>{
+       source:res?.data.slice(0,7).map((item: any)=>{
         return {
           '品牌':item.name,
           data:item.count,
         }
        })
       }
+    console.log(res,'调用了吗1')
+
       return res
   }
 }

src/hooks/commonDataComponents/useCategoryBrandCountTableRes.ts

@@ -14,14 +14,11 @@ export const handleCategoryBrandCountTable =async (targetComponent: CreateCompon
         errmsg: ''
     }
 const globalQueryParamsStore = useGlobalQueryParamsStore()
-
-    console.log(currentSource,'currentSource');
     const queryParams = {
              ...globalQueryParamsStore.getGlobalQueryParams
     }
     const res = await publicInterface(currentSource==='IT'?'/dcim/asset':'/dcim/dems/device',currentSource==='IT'?'get_category_brand_count': 'get_dev_category_brand_count', queryParams)
     const top = ['TOP1','TOP2','TOP3']
-    
     res!.data = {
          dimensions: ['分类名',...top],
          source:res?.data.map((item: any)=>{

src/hooks/commonDataComponents/useCompanyTempTopRes.ts

@@ -14,9 +14,10 @@ export const handleCompanyTempTop =async (targetComponent: CreateComponentType)
     data: { ...dataJson },
     errmsg: ''
   }
- const res = await publicInterface('/dcim/dems/device_point', 'temp_list_dashboard', {signal_ids:[signal_ids],space_complete_id})
+ const res:any = await publicInterface('/dcim/dems/device_point', 'temp_list_dashboard', {signal_ids:[signal_ids],space_complete_id})
-    if (res && res.data) {
  console.log(res,'res_handleCompanyTempTop');
+
+    if (res && res.data) {
     res.data = {
       //  dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
        dimensions: ['名称','温度值'],
@@ -28,5 +29,13 @@ export const handleCompanyTempTop =async (targetComponent: CreateComponentType)
        })
       }
       return res
+    }else{
+      // 后端没有给errcode,前端重置
+      res.errcode = '00000'
+      res.data = {
+        dimensions:[],
+        source:[]
+      }
+      return res
     }
 }

src/hooks/useChartCommonData.hook.ts

@@ -1,6 +1,6 @@
 import type VChart from 'vue-echarts'
 import { setOption } from "@/packages/public";
-import { ref, toRefs, watch } from "vue";
+import { ref, toRefs, watch,getCurrentInstance } from "vue";
 import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
 import { CurrentSourceEnum, resultType } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -24,6 +24,8 @@ import { handleManulInput } from './commonDataComponents/useManualInputRes'
 import { handleManulInputSingle } from './commonDataComponents/useManualInputSingleRes'
 import { ResultErrcode } from '@/enums/httpEnum'
 import { logDark } from 'naive-ui';
+import { fetchChartComponent } from '@/packages';
+
 
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
@@ -67,12 +69,28 @@ export const useChartCommonData = (
                     // else {
                     //     series = [seriesItem]
                     // }
+                     // 获取当前组件实例
+
+  
+
                     if (vChartRef.value) {
+                        // 缓存组件的实例后续更新用得上
+                        const instanceMap = new Map()
+                        // 存储构造函数引用,如果直接使用vChartRef.value的话会报错，因为json序列化无法对构造函数进行处理，先将它放到map中等使用的时候再获取
+                        instanceMap.set('$ref', vChartRef.value);
+                        targetComponent.$ref = instanceMap
                         Object.assign(targetComponent.option, {
                             // series,
                             dataset,
                         })
                         setOption(vChartRef.value, { dataset })
+                    }else{
+                        Object.assign(targetComponent.option, {
+                            // series,
+                            dataset,
+                        })
+                        const instance = targetComponent?.$ref?.get('$ref')
+                        setOption(instance, { dataset })
                     }
                 }
                 else if(SingleDataArr.some(_ => _ === currentSource)) { // 单个值的处理
@@ -135,9 +153,12 @@ export const useChartCommonData = (
                         break;
                     case CurrentSourceEnum.ASSETSCLASS:
                         res = await handleAssetsClass(targetComponent)
+
                         break;
                     case CurrentSourceEnum.COMPANYTEMPTOP:
                         res = await handleCompanyTempTop(targetComponent)
+                        console.log(res,'res',targetComponent,'触发了吗')
+                        
                         break;
                     case CurrentSourceEnum.ALARMTREND:
                         res = await handleAlarmTrend(targetComponent)

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -65,15 +65,17 @@ switch (props.chartConfig.commonData.currentSource) {
   globalQueryParamsStore.setGlobalQueryParams({
     space_complete_id : e.data.complete_id
   })
-  console.log(chartEditStore.getComponentList,'chartEditStore')
+  console.log(chartEditStore.getComponentList,'chartEditStore_getComponentList')
   // 没有统一更新数据的方法，只能尝试改变它的更新时间，促使watch触发请求方法
   chartEditStore.getComponentList.forEach(component=>{
-    component.request.requestInterval = 15
+    // component.request.requestInterval = 10
+    // component.request.requestInterval = 15
+    component.request.immediate = true
+
     useChartCommonData(component, useChartEditStore)
 
   })
  
-console.log(globalQueryParamsStore.getGlobalQueryParams,'chartConfig2')
   
     break;
 

src/packages/components/Charts/Maps/MapBase/index.vue

@@ -162,7 +162,6 @@ const updateMapFn = (data: any) => {
       }
     }
   })
-  console.log(props.chartConfig.option.series[0].data,'props.chartConfig.option.series[0].data')
 }
 
 //动态获取json注册地图

src/packages/components/CustomComponents/AlarmDiagram/RealTimeEvent/index.vue

@@ -150,11 +150,13 @@ watch(() => checkAll.value, (v) => {
 })
 
 const getNumber = () => {
+  console.log(props.chartConfig.customData?.dems_device_point_signal_ids,'props.chartConfig.customData?.dems_device_point_signal_ids')
   const q = {
     space_complete_id: props.chartConfig.customData?.space_complete_id,
     confirm_statuss: alarmConfirmStatus.value,
     handle_statuss: alarmHandleStatuss.value,
-    recovery_statuss: alarmRecoveryStatus.value
+    recovery_statuss: alarmRecoveryStatus.value,
+    dems_device_point_signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(','),
   }
   publicInterface('/dcim/dems/devie_active_alarm', 'count_by_level_new', q).then(res => {
     if (res && JSON.stringify(res.data) !== '{}') {

src/packages/components/CustomComponents/CustomComponents/ClassifiedStatistic/index.vue

@@ -5,7 +5,7 @@
       <div class="classify" v-for="item in type_count" :key="item">
       <div class="img">
         <img v-if="props.chartConfig?.customData?.currentSource==='IT'" src="@/assets/images/chart/decorates/Base1.png" alt="">
-        <img v-else src="@/assets/images/chart/decorates/Base2.png" alt="">
+        <img v-else src="@/assets/images/chart/decorates/Base4.png" alt="">
         <div class="value">
           {{Object.values(item)[0]}}
          
@@ -59,7 +59,9 @@ const queryParams = {
 }
 const getData = () => {
   if(props.chartConfig?.customData?.currentSource==='IT'){
-    publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', queryParams).then(res => {
+    publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', {
+  ...globalQueryParamsStore.getGlobalQueryParams
+}).then(res => {
     if (res && res.data) {
       type_count.value = res.data.type_count
       // for (const key in computeNodeData) {
@@ -68,7 +70,9 @@ const getData = () => {
     }
   })
   }else{
-    publicInterface('/dcim/dems/device', 'get_dev_category_count', queryParams).then(res => {
+    publicInterface('/dcim/dems/device', 'get_dev_category_count', {
+  ...globalQueryParamsStore.getGlobalQueryParams
+}).then(res => {
     if (res && res.data) {
       type_count.value = res.data.map((item:any)=>{
         return {
@@ -104,6 +108,13 @@ watch(()=>props.chartConfig?.customData?.currentSource,()=>{
   console.log(props.chartConfig?.customData?.currentSource,'chartConfig');
 getData()
   // 根据currentSource去获取对应 参数
+})
+watch(()=>props.chartConfig?.request?.immediate,(v)=>{
+
+if(!v)return
+getData()
+props.chartConfig.request.immediate = false
+// 根据currentSource去获取对应 参数
 
 })
 onMounted(() => {
@@ -167,14 +178,14 @@ onUnmounted(() => {
     transform: translate(-50%,-50%);
     white-space: pre-wrap;
     text-align: center;
-    font-size: 17px;
+    font-size: 20px;
 
 
   }
 }
 }
 .count{
-    font-size: 17px;
+    font-size: 20px;
     padding: 0 5px;
     font-family: LESLIE;
     font-size: 20px;

src/packages/components/CustomComponents/CustomComponents/Overview/index.vue

@@ -3,7 +3,8 @@
    
     <div class="overview" v-for="item in type_count" :key="item">
       <div class="img">
-        <img src="@/assets/images/chart/decorates/Base7.png" alt="">
+        <img v-if="props.chartConfig?.customData?.currentSource==='IT'" src="@/assets/images/chart/decorates/Base1.png" alt="">
+        <img v-else src="@/assets/images/chart/decorates/Base4.png" alt="">
         <div class="value">
           {{item.value}}
          
@@ -55,14 +56,16 @@ const queryParams = {
 }
 const getData = () => {
   if(props.chartConfig?.customData?.currentSource==='IT'){
-    publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', queryParams).then(res => {
+    publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', {
+  ...globalQueryParamsStore.getGlobalQueryParams
+}).then(res => {
  
     if (res && res.data) {
-      let commonBrands =  res.data.type_count.reduce((prev:any, curr:any) => {
+      let commonBrands =  res.data.type_count?.reduce((prev:any, curr:any) => {
     const prevValue:any = Object.values(prev)[0];
     const currValue:any = Object.values(curr)[0];
     return currValue > prevValue ? curr : prev;
-});
+},{});
       let obj = [
       {
         label:'设备总数',
@@ -81,11 +84,13 @@ const getData = () => {
     }
   })
   }else{
-    publicInterface('/dcim/dems/device', 'get_dev_category_count', queryParams).then(res => {
+    publicInterface('/dcim/dems/device', 'get_dev_category_count', {
+  ...globalQueryParamsStore.getGlobalQueryParams
+}).then(res => {
     if (res && res.data) {
-      const commonBrands:any = res.data.reduce((prev:any, curr:any) => {
+      const commonBrands:any = res?.data?.reduce((prev:any, curr:any) => {
     return curr.count > prev.count ? curr : prev;
-});
+},{});
       let obj = [
       {
         label:'设备总数',
@@ -107,7 +112,9 @@ const getData = () => {
   
 }
 let timer:unknown
+console.log([props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),'[props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit]_overview')
 watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
+  console.log(v,'overview_v')
   if(!isPreview()) return
   console.log(props,'props')
   
@@ -120,15 +127,25 @@ watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.reques
       getData()
     }, number)
   }
+},{
+  deep:true,
 })
 
 watch(()=>props.chartConfig?.customData?.currentSource,()=>{
 
-console.log(props.chartConfig?.customData?.currentSource,'chartConfig');
 getData()
 // 根据currentSource去获取对应 参数
 
 })
+watch(()=>props.chartConfig?.request?.immediate,(v)=>{
+
+if(!v)return
+getData()
+props.chartConfig.request.immediate = false
+// 根据currentSource去获取对应 参数
+
+})
+
 onMounted(() => {
   nextTick(() => {
 
@@ -177,6 +194,7 @@ onUnmounted(() => {
     transform: translate(-50%,-50%);
     white-space: pre-wrap;
     text-align: center;
+    font-size: 20px;
 
   }
   

src/packages/index.d.ts

@@ -166,7 +166,8 @@ export interface PublicConfigType {
       [InteractEvents.INTERACT_COMPONENT_ID]: string | undefined
       [InteractEvents.INTERACT_FN]: { [name: string]: string }
     }[]
-  }
+  },
+  $ref
 }
 
 export interface CreateComponentType extends PublicConfigType, requestConfig {

src/packages/public/publicConfig.ts

@@ -24,11 +24,12 @@ import cloneDeep from 'lodash/cloneDeep'
 
 // 请求基础属性
 export const requestConfig: RequestConfigType = {
+  immediate:false,
   requestDataType: RequestDataTypeEnum.STATIC,
   requestHttpType: RequestHttpEnum.GET,
   requestUrl: '',
   requestInterval: 15,
-  requestIntervalUnit: RequestHttpIntervalEnum.SECOND,
+  requestIntervalUnit: RequestHttpIntervalEnum.HOUR,
   requestContentType: RequestContentTypeEnum.DEFAULT,
   requestParamsBodyType: RequestBodyEnum.NONE,
   requestSQLContent: {

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

@@ -214,6 +214,8 @@ export interface RequestGlobalConfigType extends RequestPublicConfigType {
 
 // 单个图表请求配置
 export interface RequestConfigType extends RequestPublicConfigType {
+  // 是否立即执行
+  immediate?:boolean
   // 所选全局数据池的对应 id
   requestDataPondId?: string
   // 组件定制轮询时间

src/utils/utils.ts

@@ -275,11 +275,15 @@ export const setKeyboardDressShow = (keyCode?: number) => {
  * @param data
  */
 export const JSONStringify = <T>(data: T) => {
+  console.log(data,'data')
   return JSON.stringify(
     data,
     (key, val) => {
       // 处理函数丢失问题
       if (typeof val === 'function') {
+      console.log(key,'key')
+      console.log(val,'val')
+
         return `${val}`
       }
       // 处理 undefined 丢失问题