feat: 添加温度、设备一张图

.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 = "1f58b5b5-4eae-415b-bce9-d206adb1477b"
+VITE_DEV_TOKEN = "6d3db4a4-bcf6-47f7-8764-3b95f4f9b4d3"
 
 # production path
-VITE_PRO_PATH = 'http://192.168.0.235:8177'
+# VITE_PRO_PATH = 'http://192.168.0.235:8177'

src/components/Pages/ChartItemSetting/GlobalSetting.vue

@@ -283,6 +283,23 @@
       <setting-item name="y轴">
         <n-select v-model:value="legend.y" size="small" :options="legendConfig.lengendY" />
       </setting-item>
+      <setting-item name="上">
+        <n-input-number
+      v-model:value="legend.top"
+      :min="0"
+      size="small"
+      placeholder="px"
+    />
+      </setting-item>
+      <setting-item name="右">
+        <n-input-number
+      v-model:value="legend.right"
+      :min="0"
+      size="small"
+      placeholder="px"
+    />
+      </setting-item>
+      
     </setting-item-box>
     <setting-item-box name="图例信息">
       <setting-item name="方向">
@@ -301,6 +318,20 @@
       </setting-item>
     </setting-item-box>
   </collapse-item>
+  <collapse-item v-if="dataZoom" name="滚动条">
+    <template #header>
+      <n-switch v-model:value="dataZoom.show" size="small"></n-switch>
+    </template>
+    <setting-item-box name="样式">
+      <!-- <setting-item name="颜色">
+        <n-color-picker size="small" v-model:value="dataZoom.backgroundColor"></n-color-picker>
+      </setting-item> -->
+      <setting-item name="展示个数">
+        <n-input-number v-model:value="dataZoom.endValue" :min="1" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+   
+  </collapse-item>
 
   <collapse-item v-if="visualMap" name="视觉映射">
     <template #header>
@@ -391,6 +422,9 @@ const yAxisArr: Ref<any> = computed(() => {
 const legend = computed(() => {
   return props.optionData.legend
 })
+const dataZoom = computed(() => {
+  return props.optionData.dataZoom
+})
 
 const grid = computed(() => {
   return props.optionData.grid

src/hooks/commonDataComponents/useAlarmTrendRes.ts

@@ -3,9 +3,10 @@ import { CreateComponentType } from '@/packages/index.d'
 import { ResultErrcode } from "@/enums/httpEnum";
 import { AlarmTrendType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import dataJson from "./data.json";
-
+import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
 export const handleAlarmTrend =async (targetComponent: CreateComponentType) => {
   console.log(targetComponent.commonData,'targetComponent.commonData');
+const globalQueryParamsStore = useGlobalQueryParamsStore()
   
   const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AlarmTrendType
   let { enable,  signal_ids,alarmConfirmStatus,alarmRecoveryStatus,level} = obj
@@ -15,10 +16,10 @@ export const handleAlarmTrend =async (targetComponent: CreateComponentType) => {
     errmsg: ''
   }
   const queryParams = {
-    signal_ids,
+    signal_ids:signal_ids.length?signal_ids.split(','):[],
-    alarmConfirmStatus:alarmConfirmStatus.length ? alarmConfirmStatus.split(',') : [],
+    alarmConfirmStatus,
-    alarmRecoveryStatus:alarmRecoveryStatus.length ? alarmRecoveryStatus.split(',') : [],
+    alarmRecoveryStatus,
-    level:level.length ? alarmRecoveryStatus.split(',') : []
+    level
   }
 
  const res = await publicInterface('/dcim/dems/devie_history_alarm', 'trend_chart', queryParams)

src/hooks/commonDataComponents/useAreaDevCountRes.ts

@@ -6,13 +6,15 @@ import dataJson from "./data.json";
 
 export const handleAreaDevCountClass =async (targetComponent: CreateComponentType) => {
   const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AreaDevCountType
- console.log(targetComponent,'targetComponent_targetComponent');
 //  targetComponent?.option.series.forEach((item,index)=>{
 //   item.encode = { y:index===0? 'dev_count':'it_dev_count', x: 'space' }
 //  })
- 
+ const queryParams = {
+  space_complete_id:obj.space_complete_id,
+  space_type:'station'
+ }
   // 处理数据
-  const res  = await publicInterface('/dcim/dems/device','get_area_dev_count', {})
+  const res  = await publicInterface('/dcim/dems/device','get_area_dev_count', queryParams)
   res!.data = {
   //  dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
    dimensions: ['区域','配电设备总数','IT设备总数'],
@@ -22,6 +24,7 @@ export const handleAreaDevCountClass =async (targetComponent: CreateComponentTyp
     
       '配电设备总数':item?.dev_count,
       'IT设备总数':item?.it_dev_count,
+      complete_id:item?.space?.complete_id
     }
    })
   }

src/hooks/commonDataComponents/useAssetsClassRes.ts

@@ -3,19 +3,19 @@ import { CreateComponentType } from '@/packages/index.d'
 import { ResultErrcode } from "@/enums/httpEnum";
 import { AssetsClassType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import dataJson from "./data.json";
-import { Product } from "@vicons/carbon";
+import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
-
 export const handleAssetsClass =async (targetComponent: CreateComponentType) => {
+const globalQueryParamsStore = useGlobalQueryParamsStore()
+
   const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AssetsClassType
   let { enable, dataSource } = obj
-  console.log(enable, dataSource,'handleAssetsClass')
   if(!enable) return {
     errcode: ResultErrcode.SUCCESS,
     data: { ...dataJson },
     errmsg: ''
   }
   const query = {
-    
+    ...globalQueryParamsStore.getGlobalQueryParams
   }
   // 处理数据
   if(dataSource==='IT'){
@@ -23,10 +23,10 @@ export const handleAssetsClass =async (targetComponent: CreateComponentType) =>
     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: ['product','data'],
+     dimensions: ['品牌','data'],
      source:res?.data.brand_count.slice(0,8).map((item: {})=>{
       return {
-        product:Object.keys(item)[0],
+        '品牌':Object.keys(item)[0],
         data:Object.values(item)[0],
       }
      })

src/hooks/commonDataComponents/useCategoryBrandCountTableRes.ts

@@ -5,7 +5,7 @@ import { commonDataType, CategoryBrandCountTableType } from '@/store/modules/cha
 import { CreateComponentType } from '@/packages/index.d'
 import { ResultErrcode } from '@/enums/httpEnum'
 import dataJson from './data.json'
-
+import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
 export const handleCategoryBrandCountTable =async (targetComponent: CreateComponentType) => {
     let { currentSource, enable } = (targetComponent.commonData as commonDataType).categoryBrandCountTable as CategoryBrandCountTableType
     if(!enable) return {
@@ -13,9 +13,13 @@ export const handleCategoryBrandCountTable =async (targetComponent: CreateCompon
         data: { ...dataJson },
         errmsg: ''
     }
-    console.log(currentSource,'currentSource');
+const globalQueryParamsStore = useGlobalQueryParamsStore()
 
-    const res = await publicInterface(currentSource==='IT'?'/dcim/asset':'/dcim/dems/device',currentSource==='IT'?'get_category_brand_count': 'get_dev_category_brand_count', {})
+    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 = {

src/hooks/commonDataComponents/useCompanyTempTopRes.ts

@@ -5,7 +5,7 @@ import { CompanyTempTopType } from '@/store/modules/chartEditStore/chartEditStor
 import dataJson from "./data.json";
 
 export const handleCompanyTempTop =async (targetComponent: CreateComponentType) => {
-  console.log(targetComponent.commonData,'targetComponent.commonData');
+  console.log(targetComponent,'targetComponent.commonData');
   
   const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as CompanyTempTopType
   let { enable, space_complete_id, signal_ids} = obj

src/hooks/useChartCommonData.hook.ts

@@ -48,11 +48,7 @@ export const useChartCommonData = (
     // eCharts 组件配合 vChart 库更新方式
     const echartsUpdateHandle = (dataset: any) => {
         if (chartFrame === ChartFrameEnum.ECHARTS) {
-            // if (vChartRef.value) {
+           
-            //     setOption(vChartRef.value, { dataset: dataset })
-            // }
-            // if(!dataset.dimensions) return
-            console.log(targetComponent,'targetComponent')
             if(targetComponent.option){
                 const SingleDataArr = [
                     CurrentSourceEnum.SINGLEPOINT,
@@ -168,7 +164,6 @@ export const useChartCommonData = (
                 }
                 if (res && res.errcode === ResultErrcode.SUCCESS) {
                     try {
-                console.log(res,'res--fetchFn')
 
                         const { data } = res
                         // 多值的
@@ -185,7 +180,6 @@ export const useChartCommonData = (
                                 else throw Error()
                             }
                             else if(Object.prototype.toString.call(data) === '[object Object]'){
-                                console.log(data,'data_isMultiple');
                                 
                                 if(data.dimensions && data.source) {
                                     if(typeof targetComponent.commonData.dataLength === 'number') {
@@ -231,6 +225,7 @@ export const useChartCommonData = (
             const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
             // 开启轮询
             if (time) {
+                
                 fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
             } else {
                 fetchFn()

src/packages/components/Charts/Bars/BarCommon/config.ts

@@ -45,6 +45,27 @@ export const option = {
       min: null
     }
   ],
+  dataZoom:{
+      show: false,
+      height: 5,
+      xAxisIndex: [0],
+      bottom: 10,
+      showDetail: false,
+      showDataShadow: false,
+      borderColor: 'transparent',
+      textStyle: {
+        fontSize: 0
+      },
+      startValue: 0,
+      endValue: 5, // 从0开始的7个
+      backgroundColor: 'rgba(0,0,0,0)',
+      borderWidth: 0,
+      handleSize: '0%',
+      handleStyle: {
+        color: '#d3dee5'
+      }
+    },
+   
   dataset: { ...dataJson },
   series: [seriesItem, seriesItem],
   allSeriesConfig: seriesItem

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

@@ -1,12 +1,18 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
+  <v-chart 
-    :update-options="{
+  ref="vChartRef" 
-      replaceMerge: replaceMergeArr
+  :init-options="initOptions" 
-    }" autoresize></v-chart>
+  :theme="themeColor" 
+  :option="option" 
+  :manual-update="isPreview()"
+  :update-options="{replaceMerge: replaceMergeArr}" 
+  autoresize 
+  >
+  </v-chart>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, computed, watch, PropType } from 'vue'
+import { ref, nextTick, computed, watch, PropType,onMounted } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
@@ -21,7 +27,10 @@ import {isPreview, setTooltipPosition} from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 import cloneDeep from 'lodash/cloneDeep'
+import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
+const chartEditStore = useChartEditStore()
 
+const globalQueryParamsStore = useGlobalQueryParamsStore()
 const props = defineProps({
   themeSetting: {
     type: Object,
@@ -38,7 +47,6 @@ const props = defineProps({
 })
 
 props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
-
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
@@ -48,6 +56,36 @@ const replaceMergeArr = ref<string[]>()
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
+// 控制所有柱状图的点击事件
+const chartPEvents = (e:any)=>{
+  console.log(e,'e_chartPEvents'),
+console.log(props.chartConfig,'chartConfig1')
+switch (props.chartConfig.commonData.currentSource) {
+  case "areaDevCount":
+  globalQueryParamsStore.setGlobalQueryParams({
+    space_complete_id : e.data.complete_id
+  })
+  console.log(chartEditStore.getComponentList,'chartEditStore')
+  // 没有统一更新数据的方法，只能尝试改变它的更新时间，促使watch触发请求方法
+  chartEditStore.getComponentList.forEach(component=>{
+    component.request.requestInterval = 15
+    useChartCommonData(component, useChartEditStore)
+
+  })
+ 
+console.log(globalQueryParamsStore.getGlobalQueryParams,'chartConfig2')
+  
+    break;
+
+  default:
+    break;
+}
+}
+onMounted(() => {
+  if(vChartRef.value) {
+    vChartRef.value.chart.on('click', chartPEvents)
+  }
+})
 
 // dataset 无法变更条数的补丁
 // watch(

src/packages/components/Charts/Lines/LineCommon/config.ts

@@ -51,6 +51,26 @@ export const option = {
       min: null
     }
   ],
+  dataZoom:{
+    show: false,
+    height: 5,
+    xAxisIndex: [0],
+    bottom: 10,
+    showDetail: false,
+    showDataShadow: false,
+    borderColor: 'transparent',
+    textStyle: {
+      fontSize: 0
+    },
+    startValue: 0,
+    endValue: 5, // 从0开始的7个
+    backgroundColor: 'rgba(0,0,0,0)',
+    borderWidth: 0,
+    handleSize: '0%',
+    handleStyle: {
+      color: '#d3dee5'
+    }
+  },
   dataset: { ...dataJson },
   series: [seriesItem, seriesItem],
   allSeriesConfig: seriesItem

src/packages/components/Charts/Maps/MapBase/config.ts

@@ -13,6 +13,7 @@ export const option = {
   dataset: dataJson,
   mapRegion: {
     adcode: 'china',
+    province: '',
     showHainanIsLands: true,
     enter: false,
     backSize: 20,
@@ -185,6 +186,7 @@ export const customData = {
   // k: 名字 v: 数值
   dataMap: '{}',
   showInterval: true,
+  devList:[]
 }
 
 export const MapDefaultConfig = { ...option }

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

@@ -22,8 +22,18 @@
           label-field="name"
         />
       </SettingItem>
+      <SettingItem name="省市区" v-if="mapRegion.adcode!=='china'">
+        <n-select
+          size="small"
+          v-model:value="mapRegion.province"
+          :options="provinceOptions"
+          value-field="adcode"
+          label-field="name"
+        />
+      </SettingItem>
     </SettingItemBox>
    
+
     <SettingItemBox name="区域颜色">
       <SettingItem name="0%处颜色">
         <n-color-picker
@@ -294,7 +304,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed,watch } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
@@ -307,6 +317,12 @@ const mapRegionOptions = ref([
     name: '中国'
   }
 ])
+const provinceOptions = ref([
+  {
+    adcode: '',
+    name: ''
+  }
+])
 
 const rippleEffectOptions = ref([
   {
@@ -325,16 +341,20 @@ const props = defineProps({
     required: true
   }
 })
-
+const getMapOptionsByMapJson = (mapJson:any,origin:any)=>{
-const initMapRegionOptions = () => {
+  mapJson.features.forEach((element: any) => {
-  mapChinaJson.features.forEach((element: any) => {
     if (element.properties.name) {
-      mapRegionOptions.value.push({ ...element.properties })
+      origin.push({ ...element.properties })
     }
   })
 }
+const initMapRegionOptions = () => {
+  getMapOptionsByMapJson(mapChinaJson,mapRegionOptions.value)
+ 
+}
 initMapRegionOptions()
 
+
 const seriesList = computed(() => {
   return props.optionData.series
 })
@@ -342,4 +362,15 @@ const seriesList = computed(() => {
 const mapRegion = computed(() => {
   return props.optionData.mapRegion
 })
+watch(()=>mapRegion.value.adcode,(code:string)=>{
+  // 清空
+  provinceOptions.value = []
+  mapRegion.value.province = ''
+  import(`./mapGeojson/${code}.json`).then((data:any) => {
+    console.log(data,'data_data')
+    getMapOptionsByMapJson(data,provinceOptions.value)
+    console.log(provinceOptions.value,'provinceOptions.value')
+      
+    })
+})
 </script>

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

@@ -39,6 +39,8 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { useChartDataFetch } from '@/hooks'
 import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import {  useChartCommonData } from '@/hooks'
+
 import {isPreview, postMessageToParent} from '@/utils'
 import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
 import mapChinaJson from './mapGeojson/china.json'
@@ -152,17 +154,24 @@ const updateMapFn = (data: any) => {
     let obj = (dataMap.value as any)[it.properties.name] || {}
     return {
       name: it.properties.name,
+      adcode: it.properties.adcode,
+      
       value: it.properties.center ? it.properties.center.concat(50) : [],
       itemStyle: {
         color: colorMap.value[obj.roomId] || '#4dca59',
       }
     }
   })
+  console.log(props.chartConfig.option.series[0].data,'props.chartConfig.option.series[0].data')
 }
 
 //动态获取json注册地图
 const getGeojson = (regionId: string) => {
   return new Promise<boolean>(resolve => {
+    console.log(regionId,'regionId')
+    if(regionId==='440600'){
+      get_area_dev_count()
+    }
     import(`./mapGeojson/${regionId}.json`).then(data => {
       currentMap.value = data.default
       registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
@@ -171,16 +180,27 @@ const getGeojson = (regionId: string) => {
     })
   })
 }
-
+const get_area_dev_count =async ()=>{
+  const res  = await publicInterface('/dcim/dems/device','get_area_dev_count', {space_type:'county'})
+  customData.value.devList = res?.data
+}
 //异步时先注册空的 保证初始化不报错
-registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
+if(props.chartConfig.option.mapRegion.province){
+  registerMap(`${props.chartConfig.option.mapRegion.province}`, { geoJSON: {} as any, specialAreas: {} })
+
+}else{
+  registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
+
+}
 
 // 进行更换初始化地图 如果为china 单独处理
 const registerMapInitAsync = async () => {
   await nextTick()
   const adCode = `${props.chartConfig.option.mapRegion.adcode}`
+  const province = `${props.chartConfig.option.mapRegion.province}`
   if (adCode !== 'china') {
-    await getGeojson(adCode)
+
+    await getGeojson(province?province:adCode)
   } else {
     await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
   }
@@ -220,25 +240,7 @@ const vEchartsSetOption = () => {
   setOption(vChartRef.value, props.chartConfig.option)
 }
 
-// 更新数据处理
-const dataSetHandle = async (dataset: any) => {
-  props.chartConfig.option.series.forEach((item: any) => {
-    // if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
-    if (item.type === 'lines' && dataset.line) {
-      item.data = dataset.line.map((it: any) => {
-        return {
-          ...it,
-          lineStyle: {
-            color: props.chartConfig.option.series[2].lineStyle.normal.color
-          }
-        }
-      })
-    } else if (item.type === 'map' && dataset.map) item.data = dataset.map
-  })
-  if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
 
-  isPreview() && vEchartsSetOption()
-}
 // 处理海南群岛
 const hainanLandsHandle = async (newData: boolean) => {
   if (newData) {
@@ -250,6 +252,29 @@ const hainanLandsHandle = async (newData: boolean) => {
 
 // 点击区域
 const chartPEvents = (e: any) => {
+  console.log(e,'e')
+  console.log(props.chartConfig.option,'props.chartConfig.option.series[1]')
+  if(props.chartConfig.option.mapRegion.province===440600){
+   const county  =  currentMap.value.features.find((item:any)=>item.properties.name===e.name)
+if(county){
+ const space_complete:any = customData.value.devList.find((item:any)=>{
+    if(item.space.extend_column_string.length){
+
+     return JSON.parse(item.space.extend_column_string).county_code===`${county.properties.adcode}`
+    }
+  })
+
+  const chartEditStore = useChartEditStore()
+  chartEditStore.getComponentList.forEach(component=>{
+    if(component.commonData.currentSource==='areaDevCount'){
+      component.commonData['areaDevCount'].space_complete_id = space_complete?space_complete?.space.complete_id:null 
+        //  useChartCommonData(component, useChartEditStore)
+    }
+
+  })
+}
+    console.log(county,'county')
+    }
   if (e.seriesType !== 'map') return
   if (!props.chartConfig.option.mapRegion.enter) {
     return
@@ -295,6 +320,10 @@ onMounted(() => {
 watch(() => customData.value.dataMap, () => {
   let obj = dataMap.value as any
   props.chartConfig.option.series[1].tooltip.formatter = (v: any) => {
+    // if(props.chartConfig.option.mapRegion.province===440600){
+    //   let str = `<div style="display: flex;align-items: center"><span style="margin-right: 20px;">${v.name}</span><span>${1111}</span></div>`
+    //   return str
+    // }
     let value: any
     if(JSON.stringify(obj) !== '{}') value = obj[v.name]?.value || '-'
     else value = !isNaN(v.value) ? v.value : '-'
@@ -413,30 +442,7 @@ onUnmounted(() => {
   box?.value?.removeEventListener('mousedown', handleMousedown)
 })
 
-// //监听 dataset 数据发生变化
-// watch(
-//   () => props.chartConfig.option.dataset,
-//   newData => {
-//     dataSetHandle(newData)
-//   },
-//   {
-//     immediate: true,
-//     deep: false
-//   }
-// )
 
-// 监听线的颜色
-// if (props.chartConfig.option.series[2] && !isPreview()) {
-//   watch(
-//     () => props.chartConfig.option.series[2].lineStyle.normal.color,
-//     () => {
-//       dataSetHandle(props.chartConfig.option.dataset)
-//     },
-//     {
-//       deep: false
-//     }
-//   )
-// }
 
 //监听是否显示南海群岛
 if (!isPreview()) {
@@ -469,6 +475,20 @@ watch(
     deep: false
   }
 )
+//监听地图展示区域发生变化
+watch(
+  () => `${props.chartConfig.option.mapRegion.province}`,
+  newData => {
+    try {
+      checkOrMap(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
 
 
 let timer:unknown
@@ -499,10 +519,7 @@ onMounted(() => {
 onUnmounted(() => {
   if(timer) clearInterval(timer as number)
 })
-// 预览
+
-// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-//   dataSetHandle(newData)
-// })
 </script>
 
 <style scope lang="scss">

src/packages/components/CustomComponents/AlarmDiagram/RealTimeAlarmStatistics/config.ts

@@ -28,8 +28,8 @@ export default class Config extends PublicConfigClass implements CreateComponent
     title: '实时告警统计',
     showInterval: true,
     space_complete_id: '',
-    confirm_statuss:[],
+    confirm_statuss:['ok','not'],
-     signal_ids:'',
+     signal_ids:'131240020010',
     
   })
 }

src/packages/components/CustomComponents/AlarmDiagram/RealTimeAlarmStatistics/configData.vue

@@ -11,14 +11,17 @@
   
   <setting-item-box name="告警确认状态" :alone="true">
     <n-select v-model:value="props.customData.confirm_statuss" multiple :options="confirmStatusOption" size="small"/>
-
   </setting-item-box>
 </template>
 
 <script lang="ts" setup>
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { useOriginStore } from '@/store/modules/originStore/originStore'
 
 const props = defineProps(['customData', 'request'])
+const originStore = useOriginStore()
+const systemConstant = originStore?.getOriginStore?.user?.systemConstant
+
 const confirmStatusOption =  [
         { label: '已确认', value: 'ok' },
         { label: '未确认', value: 'not' }

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

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref } from 'vue'
+import { PropType, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref ,Ref,computed} from 'vue'
 import {isPreview} from '@/utils'
 import { CreateComponentType } from '@/packages/index.d'
 import BorderBox from '../components/BorderBox.vue'
@@ -29,6 +29,7 @@ import { useOriginStore } from '@/store/modules/originStore/originStore'
 import { publicInterface } from '@/api/path/business.api'
 import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
 import VChart from 'vue-echarts'
+import { customData as customDataConfig } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -36,9 +37,9 @@ const props = defineProps({
     required: true
   }
 })
-
+const customData: Ref<typeof customDataConfig> = computed(() => {
-const { w, h } = toRefs(props.chartConfig.attr)
+  return props.chartConfig.customData as typeof customDataConfig
-const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
+})
 
 const getStyle = (radius: number) => {
   return {
@@ -90,9 +91,10 @@ nameObj.commonColor = systemConstant['warn_levels'].find((item:any) => item.valu
 nameObj.eventColor = systemConstant['warn_levels'].find((item:any) => item.value === '5') ? systemConstant['warn_levels'].find((item:any) => item.value === '5')['remark'] : '#4fbadb'
 
 const getData = () => {
-  const confirm_statuss =props.chartConfig.customData?.confirm_statuss.length?props.chartConfig.customData?.confirm_statuss.length: systemConfig?.['active_alarm_confirm_status'] ? [...JSON.parse(systemConfig['active_alarm_confirm_status'])] : []
+  const confirm_statuss =props.chartConfig.customData?.confirm_statuss.length?props.chartConfig.customData?.confirm_statuss: systemConfig?.['active_alarm_confirm_status'] ? [...JSON.parse(systemConfig['active_alarm_confirm_status'])] : []
   const param = {
     confirm_statuss,
+    signal_ids:props.chartConfig.customData?.signal_ids.length?props.chartConfig.customData?.signal_ids.split(','):[],
     space_complete_id: props.chartConfig.customData?.space_complete_id
   }
 
@@ -303,7 +305,17 @@ watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.reques
     }, number)
   }
 })
-
+// 计算属性，用于拼接并排除 title
+const watchedProperties = computed(() => {
+      return `${customData.value.confirm_statuss.join(',')}-${customData.value.signal_ids}`;
+    });
+watch(
+      watchedProperties,
+      (newVal, oldVal) => {
+        getData()
+      },
+      { deep: true,  }
+    );
 onMounted(() => {
   nextTick(() => {
     getData()

src/packages/components/CustomComponents/CustomComponents/AlarmLevelStatistic/config.ts

@@ -25,14 +25,14 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public chartConfig = cloneDeep(AlarmLevelStatistic)
   public option = cloneDeep(option)
   public customData = cloneDeep({
-    title: '告警数统计',
+    title: '告警等级数统计',
     showInterval: true,
     currentSource:'level',
     // 告警确认状态
-    alarmConfirmStatus:'',
+    alarmConfirmStatus:['ok','not'],
     // 告警恢复状态
-    alarmRecoveryStatus:'',
+    alarmRecoveryStatus:['ok','not'],
-    signal_ids:'',
+    signal_ids:'131240020010',
-    space_complete_id:''
+    // space_complete_id:''
   })
 }

src/packages/components/CustomComponents/CustomComponents/AlarmLevelStatistic/configData.vue

@@ -3,18 +3,19 @@
     <setting-item-box name="标题" :alone="true">
       <n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
     </setting-item-box>
-    <setting-item-box name="测点ID" :alone="true">
+    <setting-item-box name="测点ID(双引号包裹内容+英文逗号隔开)" :alone="true">
     <n-input v-model:value="props.customData.signal_ids" size="small" placeholder="请输入"/>
   </setting-item-box>
-  <setting-item-box name="空间ID" :alone="true">
+  <!-- <setting-item-box name="空间ID" :alone="true">
     <n-input v-model:value="props.customData.space_complete_id" size="small" placeholder="请输入"/>
+  </setting-item-box> -->
+  <setting-item-box name="告警确认状态" :alone="true">
+    <n-select v-model:value="props.customData.alarmConfirmStatus" multiple :options="confirmStatusOption" size="small"/>
   </setting-item-box>
-      <setting-item-box name="告警确认状态(双引号包裹内容+英文逗号隔开)" :alone="true">
+  <setting-item-box name="告警恢复状态" :alone="true">
-    <n-input v-model:value="props.customData.alarmConfirmStatus" size="small" placeholder="请输入"/>
+    <n-select v-model:value="props.customData.alarmRecoveryStatus" multiple :options="recoveryStatusOption" size="small"/>
-  </setting-item-box>
-      <setting-item-box name="告警恢复状态(双引号包裹内容+英文逗号隔开)" :alone="true">
-    <n-input v-model:value="props.customData.alarmRecoveryStatus" size="small" placeholder="请输入"/>
   </setting-item-box>
+ 
   </n-space>
 </template>
 
@@ -22,7 +23,14 @@
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps(['customData', 'request'])
-
+const confirmStatusOption =  [
+        { label: '已确认', value: 'ok' },
+        { label: '未确认', value: 'not' }
+      ]
+const recoveryStatusOption =  [
+        { label: '已恢复', value: 'ok' },
+        { label: '未恢复', value: 'not' }
+      ]
 </script>
 
 <style lang="scss" scoped>

src/packages/components/CustomComponents/CustomComponents/AlarmLevelStatistic/index.ts

@@ -7,7 +7,7 @@ export const AlarmLevelStatistic: ConfigType = {
   conKey: 'VCAlarmLevelStatistic',
   // VCD开头
   conDataKey: 'VCDAlarmLevelStatistic',
-  title: '告警数统计',
+  title: '告警等级数统计',
   category: ChatCategoryEnum.CUSTOMCOMPONENTS,
   categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
   package: PackagesCategoryEnum.CUSTOMCOMPONENTS,

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

@@ -480,12 +480,15 @@ tab.value = flag
  
 }
 console.log(props.chartConfig,'chartConfig');
+console.log(customData.value,'customData')
 
-let type_count:any = ref([])
-const alarmConfirmStatus = customData.value.alarmConfirmStatus.length ? customData.value.alarmConfirmStatus.split(',') : []
-const alarmRecoveryStatus = customData.value.alarmRecoveryStatus.length ? customData.value.alarmRecoveryStatus.split(',') : []
 const getData = () => {
-  publicInterface('/dcim/dems/devie_history_alarm', 'alarm_statistical_by_time', {alarmConfirmStatus,alarmRecoveryStatus}).then((res:any) => {
+  const params = {
+  signal_ids:customData.value.signal_ids.length?customData.value.signal_ids.split(','):[],
+  alarmConfirmStatus:customData.value.alarmConfirmStatus.length ? customData.value.alarmConfirmStatus : [],
+  alarmRecoveryStatus : customData.value.alarmRecoveryStatus.length ? customData.value.alarmRecoveryStatus : []
+}
+  publicInterface('/dcim/dems/devie_history_alarm', 'alarm_statistical_by_time', params).then((res:any) => {
         if (res.data) {
           alarmData.value = res.data
       console.log(alarmData.value,'getData_alarmLevel')
@@ -510,13 +513,18 @@ watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.reques
   }
 })
 
-watch(()=>props.chartConfig?.customData?.currentSource,()=>{
+// 计算属性，用于拼接并排除 title
+const watchedProperties = computed(() => {
+      return `${customData.value.alarmConfirmStatus.join(',')}-${customData.value.alarmRecoveryStatus.join(',')}-${customData.value.signal_ids}`;
+    });
+watch(
+      watchedProperties,
+      (newVal, oldVal) => {
+        getData()
+      },
+      { deep: true,  }
+    );
 
-  console.log(props.chartConfig?.customData?.currentSource,'chartConfig');
-getData()
-  // 根据currentSource去获取对应 参数
-  
-})
 onMounted(() => {
   nextTick(() => {
 

src/packages/components/CustomComponents/CustomComponents/AlarmTrend/config.ts

@@ -0,0 +1,27 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { AlarmTrend } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+// import logo from '@/assets/logo.png'
+
+export const option = {}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  constructor() {
+    super();
+    this.attr.w = 450
+    this.attr.h = 300
+    this.request.requestInterval = 15
+  }
+  public key = AlarmTrend.key
+  public chartConfig = cloneDeep(AlarmTrend)
+  public option = cloneDeep(option)
+  public customData = cloneDeep({
+    title: '告警趋势',
+    showInterval: true,
+    signal_ids:'131240020010',
+    alarmConfirmStatus:['ok','not'],
+    alarmRecoveryStatus:['ok','not'],
+    level:[1, 2, 3, 4, 5]
+  })
+}

src/packages/components/CustomComponents/CustomComponents/AlarmTrend/config.vue

@@ -0,0 +1,23 @@
+<template>
+</template>
+
+<script setup lang="ts">
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import {computed, PropType} from "vue";
+import {GlobalThemeJsonType} from "@/settings/chartThemes";
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const config = computed(() => {
+  return props.optionData
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/CustomComponents/CustomComponents/AlarmTrend/configData.vue

@@ -0,0 +1,49 @@
+<template>
+  <setting-item-box name="标题1" :alone="true">
+    <n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
+  </setting-item-box>
+ 
+  <setting-item-box name="测点ID" :alone="true">
+    <n-input v-model:value="props.customData.signal_ids" size="small" placeholder="请输入"/>
+  </setting-item-box>
+  <setting-item-box name="告警确认状态" :alone="true">
+    <n-select v-model:value="props.customData.alarmConfirmStatus" multiple :options="confirmStatusOption" size="small"/>
+  </setting-item-box>
+    <setting-item-box name="告警恢复状态" :alone="true">
+    <n-select v-model:value="props.customData.alarmRecoveryStatus" multiple :options="recoveryStatusOption" size="small"/>
+  </setting-item-box>
+  <setting-item-box name="告警等级" :alone="true">
+    <n-select v-model:value="props.customData.level" multiple :options="levelOptions" size="small"/>
+  </setting-item-box>
+</template>
+
+<script lang="ts" setup>
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import {computed} from "vue";
+import {cloneDeep} from "lodash";
+import {icon} from "@/plugins";
+const props = defineProps(['customData', 'request'])
+
+import { useOriginStore } from '@/store/modules/originStore/originStore'
+const originStore = useOriginStore()
+const systemConstant = originStore?.getOriginStore?.user?.systemConstant
+const levelOptions =  systemConstant['warn_levels'].filter((item:any)=>{
+if(item.value){
+  item.value = item.value*1
+  return item
+}
+})
+
+
+const confirmStatusOption =  [
+        { label: '已确认', value: 'ok' },
+        { label: '未确认', value: 'not' }
+      ]
+const recoveryStatusOption =  [
+        { label: '已恢复', value: 'ok' },
+        { label: '未恢复', value: 'not' }
+      ]
+</script>
+
+<style lang="scss" scoped>
+</style>

src/packages/components/CustomComponents/CustomComponents/AlarmTrend/index.ts

@@ -0,0 +1,16 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
+
+export const AlarmTrend: ConfigType = {
+  key: 'AlarmTrend',
+  chartKey: 'VAlarmTrend',
+  conKey: 'VCAlarmTrend',
+  // VCD开头
+  conDataKey: 'VCDAlarmTrend',
+  title: '告警趋势',
+  category: ChatCategoryEnum.CUSTOMCOMPONENTS,
+  categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
+  package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'AlarmTrend.png'
+}

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

@@ -0,0 +1,256 @@
+<template>
+  <div style="overflow: visible;">
+    <BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto">
+      <div class="tab-item">
+      <span class="change_tab" :class="{'change_tab--active': tab === 0}" @click="changeTab(0)">月</span>
+      <span class="change_tab" :class="{'change_tab--active': tab === 1}" @click="changeTab(1)">年</span>
+    </div>
+    <v-chart ref="vChartRef" :option="chartOption" autoresize></v-chart>
+      
+    </BorderBox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BorderBox from '../components/BorderBox.vue'
+import VChart from 'vue-echarts'
+import {computed, PropType, Ref, onMounted, ref, watch, onUnmounted} from "vue";
+import { customData as customDataConfig } from './config'
+import { CreateComponentType } from '@/packages/index.d'
+import { publicInterface } from '@/api/path/business.api'
+import {isPreview} from '@/utils'
+import moment from 'moment'
+import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
+
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+const tab = ref(0)
+const getStyle = (radius: number) => {
+  return {
+    borderRadius: `${radius}px`,
+    overflow: 'hidden',
+  }
+}
+
+const customData: Ref<typeof customDataConfig> = computed(() => {
+  return props.chartConfig.customData as typeof customDataConfig
+})
+
+
+const {signal_ids,alarmConfirmStatus,alarmRecoveryStatus,level} = customData.value
+
+
+const   changeTab = (flag:any)=> {
+  tab.value = flag
+  getData()
+}
+
+
+let chartOption:Ref<any> = ref({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              color: '#27558e'
+            }
+          },
+         
+        },
+        grid: {
+          right: '2%',
+          top: '12%',
+          left: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        color: ['#E5403D', '#EE7F57', '#EEC219', '#50AFCE', '#82C046'],
+        dataZoom:{
+      show: false,
+      height: 5,
+      xAxisIndex: [0],
+      bottom: 10,
+      showDetail: false,
+      showDataShadow: false,
+      borderColor: 'transparent',
+      textStyle: {
+        fontSize: 0
+      },
+      startValue: 0,
+      endValue: 5, // 从0开始的7个
+      backgroundColor: 'rgba(0,0,0,0)',
+      borderWidth: 0,
+      handleSize: '0%',
+      handleStyle: {
+        color: '#d3dee5'
+      }
+    },
+        legend: {
+          data: [],
+          textStyle: {
+            fontSize: 12,
+            fontWeight: 'bolder',
+            color: '#ccc'
+          },
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            name: '',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#ccc'
+          }
+        },
+        axisLabel: {
+          inside: false,
+          textStyle: {
+            color: '#ccc',
+            fontWeight: 'normal',
+            fontSize: '12'
+          },
+          interval: 0
+        },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '',
+            minInterval: 1,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color:  '#ccc'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#4196ff',
+                opacity: 0.2
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color:  '#e0e0e0' 
+              }
+            }
+          }
+        ],
+        series: [
+        ]
+      },)
+const vChartRef = ref()
+
+
+const getData = () => {
+  let params:any = {
+    signal_ids:signal_ids.length?signal_ids.split(','):[],
+    alarmConfirmStatus,
+    alarmRecoveryStatus,
+    level
+  }
+  tab.value===0?params['before_day'] =  30:params['before_month'] =  12
+  publicInterface('/dcim/dems/devie_history_alarm', 'trend_chart', params).then((response:any) => {
+    let res  = response?.data
+    console.log(res,'res');
+
+    
+    if (res && res['series']) {
+          chartOption.value.xAxis[0]['data'] = res['legend']
+          chartOption.value.legend.data = []
+          chartOption.value.series = []
+          for (let i = 0; i < res['series'].length; i++) {
+            chartOption.value.series.push(
+              {
+                name: res['series'][i]['name'],
+                type: 'line',
+                smooth: true,
+                showSymbol: true,
+                symbol: 'circle',
+                data: res['series'][i]['data']
+              }
+            )
+            chartOption.value.legend.data.push({ name: res['series'][i]['name'] })
+          }
+        console.log(chartOption.value,'chartOption');
+        
+        }
+      })
+}
+
+
+
+let timer:unknown
+watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
+  if(!isPreview()) return
+  if(props.chartConfig.request.requestInterval) {
+    if(timer) clearInterval(timer as number)
+    const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
+    const unit = obj.unit
+    const number = unit * props.chartConfig.request.requestInterval
+    timer = setInterval(() => {
+    }, number)
+  }
+})
+
+onMounted(() => {
+  getData()
+  if(!isPreview()) return
+  const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
+  const unit = obj.unit
+  const number = unit * props.chartConfig.request.requestInterval!
+  timer = setInterval(() => {
+  }, number)
+})
+
+onUnmounted(() => {
+  if(timer) clearInterval(timer as number)
+})
+
+</script>
+
+<style lang="scss" scoped>
+.tab-item {
+      position: absolute;
+      top: 0;
+      right: 10px;
+      padding-right: 10px;
+      color: #fff;
+      height: 40px;
+      line-height: 40px;
+      .change_tab {
+        display: inline-block;
+        margin: 0 4px;
+        cursor: pointer;
+        font-size: 14px;
+        color: themed('dynamicComponentTabColor');
+        font-family: 'PingFang-SC-Regular';
+        &--active {
+          border-bottom: 1px solid #4196ff;
+          color: #4196ff;
+          font-family: 'PingFang-SC-Bold';
+        }
+      }
+    }
+.box{
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  position: relative;
+  .radio{
+    position: absolute;
+    right: 0;
+    top: -40px;
+  }
+}
+</style>

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

@@ -6,9 +6,13 @@
       <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="">
+        <div class="value">
+          {{Object.values(item)[0]}}
+         
+        </div>
       </div>
       <div class="value">
-        {{Object.keys(item)[0]}}<span class="count">{{Object.values(item)[0]}}</span>台
+        {{Object.keys(item)[0]}}
       </div>
     </div>
     </div>
@@ -29,7 +33,8 @@ import {cloneDeep} from 'lodash'
 import moment from "moment"
 import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
 import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
-
+import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
+const globalQueryParamsStore = useGlobalQueryParamsStore()
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
@@ -47,13 +52,14 @@ const getStyle = (radius: number) => {
     overflow: 'hidden'
   }
 }
-console.log(props.chartConfig,'chartConfig');
 
 let type_count:any = ref([])
+const queryParams = {
+  ...globalQueryParamsStore.getGlobalQueryParams
+}
 const getData = () => {
   if(props.chartConfig?.customData?.currentSource==='IT'){
-    publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', {}).then(res => {
+    publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', queryParams).then(res => {
-    console.log(res,'res----')
     if (res && res.data) {
       type_count.value = res.data.type_count
       // for (const key in computeNodeData) {
@@ -62,8 +68,7 @@ const getData = () => {
     }
   })
   }else{
-    publicInterface('/dcim/dems/device', 'get_dev_category_count', {}).then(res => {
+    publicInterface('/dcim/dems/device', 'get_dev_category_count', queryParams).then(res => {
-    console.log(res,'res----')
     if (res && res.data) {
       type_count.value = res.data.map((item:any)=>{
         return {
@@ -147,12 +152,25 @@ onUnmounted(() => {
   overflow: auto;
   color:#fff;
   .img{
+    position: relative;
   width: 100px;
   height: 100px;
   img{
     width: 100%;
     height: 100%;
   }
+  .value{
+    position: absolute;
+    width: 100%;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+    white-space: pre-wrap;
+    text-align: center;
+    font-size: 17px;
+
+
+  }
 }
 }
 .count{

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

@@ -30,7 +30,8 @@ import {cloneDeep} from 'lodash'
 import moment from "moment"
 import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
 import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
-
+import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
+const globalQueryParamsStore = useGlobalQueryParamsStore()
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
@@ -48,13 +49,13 @@ const getStyle = (radius: number) => {
     overflow: 'hidden'
   }
 }
-console.log(props.chartConfig,'chartConfig');
 let type_count:any = ref([])
-
+const queryParams = {
+  ...globalQueryParamsStore.getGlobalQueryParams
+}
 const getData = () => {
   if(props.chartConfig?.customData?.currentSource==='IT'){
-    publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', {}).then(res => {
+    publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', queryParams).then(res => {
-    console.log(res,'res----')
  
     if (res && res.data) {
       let commonBrands =  res.data.type_count.reduce((prev:any, curr:any) => {
@@ -80,8 +81,7 @@ const getData = () => {
     }
   })
   }else{
-    publicInterface('/dcim/dems/device', 'get_dev_category_count', {}).then(res => {
+    publicInterface('/dcim/dems/device', 'get_dev_category_count', queryParams).then(res => {
-    console.log(res,'res----')
     if (res && res.data) {
       const commonBrands:any = res.data.reduce((prev:any, curr:any) => {
     return curr.count > prev.count ? curr : prev;
@@ -104,7 +104,6 @@ const getData = () => {
     }
   })
   }
-  console.log(type_count.value,`type_count_${props.chartConfig?.customData?.currentSource}`)
   
 }
 let timer:unknown

src/packages/components/CustomComponents/CustomComponents/index.ts

@@ -20,6 +20,7 @@ import { PositionConfig } from './Position'
 import { JumpBtnConfig } from './JumpBtn'
 import { ClassifiedStatistic } from './ClassifiedStatistic'
 import { AlarmLevelStatistic } from './AlarmLevelStatistic'
+import { AlarmTrend } from './AlarmTrend'
 import { RoomTemperature } from './RoomTemperature'
 import { Overview } from './Overview'
 
@@ -46,6 +47,7 @@ export default [
     JumpBtnConfig,
     ClassifiedStatistic,
     AlarmLevelStatistic,
+    AlarmTrend,
     RoomTemperature,
     Overview
 ]

src/packages/components/Decorates/Borders/BorderCustom1/index.vue

@@ -25,7 +25,6 @@ const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
 const option = shallowReactive({
   dataset: ''
 })
-
 const getStyle = (radius: number) => {
   return {
     borderRadius: `${radius}px`,

src/packages/components/Tables/Tables/TablesBasic/index.vue

@@ -13,6 +13,7 @@
       </template>
     </n-input>
     <n-data-table
+    :class="{'customDataTable':isBackgroundColor}"
       style="box-sizing: border-box;"
       :style="`
       width: ${w}px;
@@ -164,7 +165,6 @@ const columns = computed(() => {
   return dimensions
 })
 useChartCommonData(props.chartConfig, useChartEditStore)
-console.log(props.chartConfig,'chartConfig')
 
 </script>
 
@@ -175,19 +175,18 @@ console.log(props.chartConfig,'chartConfig')
   gap: 15px;
   align-items: flex-end;
 }
-:deep(.n-data-table-td) {
+:deep(td) {
-  background-color:#1A1D25;
+  background-color:red;
 }
 :deep(.n-data-table-th) {
   background-color:#1A1D25;
 }
-@include go('custom-data-table'){
+.customDataTable{
-  background-color: #1A1D25;
+  :deep(td) {
-  :deep(.n-data-table-td) {
+  background-color:rgba(65, 150, 255, 0.05);
-  background-color:#1A1D25;
-}
-  :deep(.n-data-table-th) {
-  background-color:#1A1D25;
 }
+//   :deep(th) {
+//   background-color:rgba(65, 150, 255, 0.05);
+// }
 }
 </style>

src/packages/public/chart.ts

@@ -12,6 +12,7 @@ import type VChart from 'vue-echarts'
  * @returns object
  */
 export const mergeTheme = <T, U>(option: T, themeSetting: U, includes: string[]) => {
+  
   return (option = merge({}, pick(themeSetting, includes), option))
 }
 

src/packages/public/publicConfig.ts

@@ -52,7 +52,17 @@ export const requestConfig: RequestConfigType = {
 
 const commonData: commonDataType = {
   currentSource: CurrentSourceEnum.POINTHISTORY,
+  queryParams:{},
   dataLength: null,
+  areaDevCount: {
+    enable: false,
+    dataSource: '',
+    space_complete_id:''
+  },
+  assetsClass: {
+    enable: false,
+    dataSource: ''
+  },
   pointHistory: {
     enable: false,
     methods: [],
@@ -88,10 +98,7 @@ const commonData: commonDataType = {
     enable: false,
     space_complete_id: ''
   },
-  assetsClass: {
+  
-    enable: false,
-    dataSource: ''
-  },
   companyTempTop: {
     enable: false,
     signal_ids:'131240020010',
@@ -100,6 +107,9 @@ const commonData: commonDataType = {
   alarmTrend: {
     enable: false,
     signal_ids:'131240020010',
+    alarmConfirmStatus:['ok','not'],
+    alarmRecoveryStatus:['ok','not'],
+    level:[1, 2, 3, 4, 5]
   },
   pointTable: {
     enable: false,

src/settings/chartThemes/global.theme.json

@@ -128,6 +128,8 @@
     "type": "scroll",
     "x": "center",
     "y": "top",
+    "top": 0,
+    "right": 10,
     "icon": "circle",
     "orient": "horizontal",
     "textStyle": {

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

@@ -372,14 +372,15 @@ export interface CompanyTempTopType {
 export interface AlarmTrendType {
   enable: boolean
   signal_ids:string
-  alarmConfirmStatus:string
+  alarmConfirmStatus:string[]
-  alarmRecoveryStatus:string
+  alarmRecoveryStatus:string[]
-  level:string
+  level:number[]
 
 }
 export interface AreaDevCountType {
   enable: boolean
   dataSource: string
+  space_complete_id:string
 }
 
 // 测点表格值
@@ -413,6 +414,8 @@ export interface ManualInputSingleType {
 export interface commonDataType {
   // 多数据
   currentSource: CurrentSourceEnum
+  // 公共接口参数
+  queryParams:any
   dataLength: number | null
   pointHistory: PointHistoryType
   energyUseHistory: EnergyUseHistoryType

src/store/modules/globalQueryParamsStore/globalQueryParamsStore.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { cloneDeep } from 'lodash'
+
+export const useGlobalQueryParamsStore = defineStore({
+    id: 'useGlobalQueryParamsStore',
+    state: () => ({
+        queryParams: {}
+    }),
+    getters: {
+        getGlobalQueryParams():{[k:string]: any} {
+            return this.queryParams
+        }
+    },
+    actions: {
+        setGlobalQueryParams(queryParams: {[k:string]: any}, merge: boolean = true) {
+            if(merge) {
+                this.queryParams = cloneDeep(queryParams)
+            }
+            else {
+                Object.assign(this.queryParams, queryParams)
+            }
+        }
+    }
+})

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

@@ -7,17 +7,18 @@
   <setting-item-box name="测点ID" :alone="true">
     <n-input v-model:value="currentObj.signal_ids" size="small" placeholder="请输入"/>
   </setting-item-box>
-  <setting-item-box name="告警确认状态(双引号包裹内容+英文逗号隔开)" :alone="true">
+  <setting-item-box name="告警确认状态" :alone="true">
-    <n-input v-model:value="currentObj.alarmConfirmStatus" size="small" placeholder="请输入"/>
+    <n-select v-model:value="currentObj.alarmConfirmStatus" multiple :options="confirmStatusOption" size="small"/>
   </setting-item-box>
-  <setting-item-box name="告警恢复状态(双引号包裹内容+英文逗号隔开)" :alone="true">
+    <setting-item-box name="告警恢复状态" :alone="true">
-    <n-input v-model:value="currentObj.alarmRecoveryStatus" size="small" placeholder="请输入"/>
+    <n-select v-model:value="currentObj.alarmRecoveryStatus" multiple :options="recoveryStatusOption" size="small"/>
   </setting-item-box>
-  <setting-item-box name="告警恢复状态(双引号包裹内容+英文逗号隔开)" :alone="true">
+  <setting-item-box name="告警等级" :alone="true">
-    <n-input v-model:value="currentObj.level" size="small" placeholder="请输入"/>
+    <n-select v-model:value="currentObj.level" multiple :options="levelOptions" size="small"/>
   </setting-item-box>
   
  
+ 
 </template>
 
 <script lang="ts" setup>
@@ -26,12 +27,32 @@ import type {Ref} from 'vue'
 import {SettingItemBox} from '@/components/Pages/ChartItemSetting'
 import {useTargetData} from '../../hooks/useTargetData.hook'
 import {commonDataType, AlarmTrendType} from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useOriginStore } from '@/store/modules/originStore/originStore'
+const originStore = useOriginStore()
+const systemConstant = originStore?.getOriginStore?.user?.systemConstant
+const levelOptions =  systemConstant['warn_levels'].filter((item:any)=>{
+if(item.value){
+  item.value = item.value*1
+  return item
+}
+})
 const {targetData} = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string }> }
 
 const currentObj = computed(() => {
   return targetData.value.commonData[targetData.value.commonData.currentSource] as AlarmTrendType
 })
-
+const confirmStatusOption =  [
+        { label: '已确认', value: 'ok' },
+        { label: '未确认', value: 'not' }
+      ]
+const recoveryStatusOption =  [
+        { label: '已恢复', value: 'ok' },
+        { label: '未恢复', value: 'not' }
+      ]
+// const recoveryStatusOption =  [
+//         { label: '已恢复', value: 'ok' },
+//         { label: '未恢复', value: 'not' }
+//       ]
 </script>
 
 <style lang="scss" scoped>