feat: 添加环形玫瑰图 水滴图 两个接口

src/hooks/commonDataComponents/useMonthAlarmClassRes.ts

@@ -0,0 +1,23 @@
+import { publicInterface } from "@/api/path";
+import { MonthAlarmClassType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { CreateComponentType } from '@/packages/index.d'
+import { ResultErrcode } from "@/enums/httpEnum";
+import dataJson from "./data.json";
+
+export const handleMonthAlarmClass = (targetComponent: CreateComponentType) => {
+  const obj = targetComponent.commonData[targetComponent.commonData.currentSource]
+  let { enable, confirm_statuses, recovery_statuses, levels, space_complete_id } = obj as MonthAlarmClassType
+  if(!enable) return {
+    errcode: ResultErrcode.SUCCESS,
+    data: { ...dataJson },
+    errmsg: ''
+  }
+
+  const query = {
+    confirm_statuses,
+    recovery_statuses,
+    levels,
+    space_complete_id,
+  }
+  return publicInterface('/dcim/system/custom_large_screen', 'count_by_asset_type', query)
+}

src/hooks/commonDataComponents/useNoParamRes.ts

@@ -0,0 +1,25 @@
+import { publicInterface } from "@/api/path";
+import { CreateComponentType } from '@/packages/index.d'
+import { ResultErrcode } from "@/enums/httpEnum";
+import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import dataJson from "./data.json";
+
+export const handleNoParam = (targetComponent: CreateComponentType) => {
+  const obj = targetComponent.commonData[targetComponent.commonData.currentSource]
+  const list = [
+    {
+      name: CurrentSourceEnum.DEVICECLASS,
+      apiPrefix: '/dcim/system/custom_large_screen',
+      apiSuffix: 'count_device_by_device_type_active'
+    }
+  ]
+  let target = list.find(_ => _.name === targetComponent.commonData.currentSource) || { name: '', apiPrefix: '', apiSuffix: '' }
+  let { enable } = obj
+  if(!enable) return {
+    errcode: ResultErrcode.SUCCESS,
+    data: { ...dataJson },
+    errmsg: ''
+  }
+
+  return publicInterface(target.apiPrefix, target.apiSuffix, {})
+}

src/hooks/useChartCommonData.hook.ts

@@ -11,6 +11,8 @@ import { handleEnergyUseHistory } from './commonDataComponents/useEnergyUseHisto
 import { handleRecordValueHistory } from './commonDataComponents/useRecordValueHistoryRes'
 import { handlePointRealTime } from './commonDataComponents/usePointRealTimeRes'
 import { handleSinglePoint } from './commonDataComponents/useSinglePointRes'
+import { handleMonthAlarmClass } from './commonDataComponents/useMonthAlarmClassRes'
+import { handleNoParam } from './commonDataComponents/useNoParamRes'
 import { ResultErrcode } from '@/enums/httpEnum'
 
 // 获取类型
@@ -112,7 +114,11 @@ export const useChartCommonData = (
                     case CurrentSourceEnum.SINGLEPOINT:
                         res = await handleSinglePoint(targetComponent)
                         break;
+                    case CurrentSourceEnum.MONTHALARMCLASS:
+                        res = await handleMonthAlarmClass(targetComponent)
+                        break;
                     default:
+                        res = await handleNoParam(targetComponent)
                         break;
                 }
                 if (res && res.errcode === ResultErrcode.SUCCESS) {

src/layout/components/LayoutHeader/index.vue

@@ -38,12 +38,12 @@ const isProject = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-$min-width: 520px;
+$min-width: 380px;
 @include go(header) {
   width: 100vw;
   &-box {
     display: grid;
-    grid-template-columns: $min-width 1fr $min-width;
+    grid-template-columns: minmax($min-width, 2fr) 1fr minmax(80px, 2fr);
     &.is-project {
       grid-template-columns: none;
     }
@@ -61,7 +61,6 @@ $min-width: 520px;
       }
       &.right {
         justify-content: end;
-        min-width: $min-width;
       }
     }
     height: $--header-height;

src/packages/components/Charts/Mores/WaterPolo/config.ts

@@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { WaterPoloConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 export const shapes = [
   {
@@ -43,7 +44,21 @@ export const option = {
       type: 'liquidFill',
       shape: shapes[0].value,
       radius: '90%',
-      data: [0],
+      data: [
+        {
+          name: '',
+          value: 0,
+          unit: '',
+          showValue: 0,
+          config: {
+            showPercent: false,
+            showUnit: false,
+            showSubText: true,
+            showSubTextUnit: true,
+            max: 100,
+          }
+        }
+      ],
       center: ['50%', '50%'],
       color: [
         {
@@ -72,9 +87,22 @@ export const option = {
       label: {
         normal: {
           textStyle: {
-            fontSize: 50,
+            fontSize: 40,
             color: '#fff',
           },
+          formatter: (param:any) => {
+            const { showPercent, showUnit, showSubText, showSubTextUnit } = param.data.config
+            const { name, value, unit, showValue } = param.data
+
+            let str = ''
+            if(showPercent) str += `${showValue * 100}%`
+            else str += showUnit ? `${showValue}${unit}` : showValue
+
+            str += '\n'
+            if(showSubText) str += name
+            if(showSubTextUnit && unit) str += showSubText ? `(${unit})` : unit
+            return str
+          }
         },
       },
       outline: {
@@ -91,6 +119,10 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
+  constructor() {
+    super();
+    this.commonData.currentSource = CurrentSourceEnum.SINGLEPOINT
+  }
   public key = WaterPoloConfig.key
   public chartConfig = cloneDeep(WaterPoloConfig)
   public option = echartOptionProfixHandle(option, includes)

src/packages/components/Charts/Mores/WaterPolo/config.vue

@@ -5,16 +5,47 @@
     name="水球"
     :expanded="true"
   >
-    <SettingItemBox name="内容">
+    <SettingItemBox name="数据">
-      <SettingItem name="数值">
+<!--      <SettingItem name="数值">-->
-        <n-input-number
+<!--        <n-input-number-->
-          v-model:value="item.data[0]"
+<!--          v-model:value="item.data[0]"-->
-          :min="0"
+<!--          :min="0"-->
-          :step="0.01"
+<!--          :step="0.01"-->
-          size="small"
+<!--          size="small"-->
-          placeholder="水球数值"
+<!--          placeholder="水球数值"-->
-        ></n-input-number>
+<!--        ></n-input-number>-->
+<!--      </SettingItem>-->
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="item.data[0].config.showPercent" size="small" />
+          <n-text>是否百分比</n-text>
+        </n-space>
       </SettingItem>
+      <SettingItem v-if="!item.data[0].config.showPercent" name="最大值">
+        <n-input-number v-model:value="item.data[0].config.max" :min="0" :step="1" size="small" placeholder="请输入最大值"/>
+      </SettingItem>
+      <SettingItem v-if="!item.data[0].config.showPercent">
+        <n-space>
+          <n-switch v-model:value="item.data[0].config.showUnit" size="small" />
+          <n-text>展示单位</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="副标题">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="item.data[0].config.showSubText" size="small" />
+          <n-text>展示副标题</n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="item.data[0].config.showSubTextUnit" size="small" />
+          <n-text>展示单位</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="样式">
       <SettingItem name="形状">
         <n-select v-model:value="item.shape" :options="shapes" placeholder="选择形状" />
       </SettingItem>
@@ -27,14 +58,14 @@
           size="small"
           :modes="['hex']"
           v-model:value="item.color[0].colorStops[0].color"
-      ></n-color-picker>
+        ></n-color-picker>
       </SettingItem>
       <SettingItem name="颜色2">
         <n-color-picker
           size="small"
           :modes="['hex']"
           v-model:value="item.color[0].colorStops[1].color"
-      ></n-color-picker>
+        ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="背景" :alone="true">

src/packages/components/Charts/Mores/WaterPolo/index.ts

@@ -9,6 +9,6 @@ export const WaterPoloConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
-  chartFrame: ChartFrameEnum.COMMON,
+  chartFrame: ChartFrameEnum.ECHARTS,
   image: 'water_WaterPolo.png'
 }

src/packages/components/Charts/Mores/WaterPolo/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, watch, reactive } from 'vue'
+import { PropType, watch, reactive, computed } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
@@ -14,7 +14,8 @@ import config from './config'
 import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartDataFetch } from '@/hooks'
+import { useChartCommonData } from '@/hooks'
+import { resultType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 const props = defineProps({
   themeSetting: {
@@ -74,29 +75,75 @@ watch(
   }
 )
 
+// // 数据处理
+// const dataHandle = (newData: number | string) => {
+//   newData = isString(newData) ? parseFloat(newData) : newData
+//   return parseFloat(newData.toFixed(2))
+// }
+//
+// // 编辑
+// watch(
+//   () => props.chartConfig.option.dataset,
+//   newData => {
+//     if (!isString(newData) && !isNumber(newData)) return
+//     props.chartConfig.option.series[0].data = [dataHandle(newData)]
+//     option.value = props.chartConfig.option
+//   },
+//   {
+//     immediate: true,
+//     deep: false
+//   }
+// )
+
 // 数据处理
-const dataHandle = (newData: number | string) => {
+const dataHandle = (newData: resultType) => {
-  newData = isString(newData) ? parseFloat(newData) : newData
+  const { value, name, unit } = newData
-  return parseFloat(newData.toFixed(2))
+  let config = props.chartConfig.option
+  const { showPercent, max } = config.series[0].data[0].config
+
+  if(showPercent) config.series[0].data[0].value = value
+  else config.series[0].data[0].value = (max && value) ? (value / max).toFixed(2) : 0
+  config.series[0].data[0].showValue = value
+  config.series[0].data[0].name = name
+  config.series[0].data[0].unit = unit
 }
 
-// 编辑
+const targetData = computed(() => {
+  const commonData = props.chartConfig.commonData
+  return commonData[commonData.currentSource] as { result: resultType }
+})
+
+// 配置时
 watch(
-  () => props.chartConfig.option.dataset,
+  () => targetData.value,
   newData => {
-    if (!isString(newData) && !isNumber(newData)) return
+    try {
-    props.chartConfig.option.series[0].data = [dataHandle(newData)]
+      dataHandle(newData.result)
-    option.value = props.chartConfig.option
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     immediate: true,
-    deep: false
+    deep: true
   }
 )
 
-// 预览
+
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+
-  // @ts-ignore
+watch(() => props.chartConfig.option.series[0].data[0].config, () => {
-  option.value.series[0].data = [dataHandle(newData)]
+  const commonData = props.chartConfig.commonData
+  const data = commonData[commonData.currentSource] as { result: resultType }
+  dataHandle(data.result)
+}, {
+  immediate: true,
+  deep: true,
 })
+
+// 预览
+// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+//   // @ts-ignore
+//   option.value.series[0].data = [dataHandle(newData)]
+// })
+const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Pies/PieCircle/config.ts

@@ -34,7 +34,8 @@ const option = {
     subtextStyle: {
       color: "#56B9F8",
       fontSize: 30
-    }
+    },
+    top: 'middle',
   },
   series: [
     {

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

@@ -1,9 +1,9 @@
 <template>
-  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
+  <v-chart ref="vchart" :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
 </template>
 
 <script setup lang="ts">
-import { PropType, reactive, watch, ref } from 'vue'
+import { PropType, reactive, watch } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
@@ -86,6 +86,31 @@ const dataHandle = (newData: any) => {
   option.value = props.chartConfig.option
 }
 
+const computeTop = (h: number, fs1: number, fs2: number) => {
+  let str: string
+  if(h) {
+    str = (50 - (fs1 + fs2) * 100 / (2 * h)).toFixed(2) + '%'
+  }
+  else str = 'middle'
+  return str
+}
+
+watch(
+  [
+    () => props.chartConfig.attr.h,
+    () => props.chartConfig.option.title.textStyle.fontSize,
+    () => props.chartConfig.option.title.subtextStyle.fontSize,
+    () => props.chartConfig.option.titleContrl.showSubText,
+    () => props.chartConfig.option.titleContrl.showSubTextUnit,
+  ],
+  ([h, fs1, fs2, s1, s2]) => {
+    props.chartConfig.option.title.top = computeTop(h, fs1, s1 || s2 ? fs2 : 0)
+  },
+  {
+    immediate: true,
+    deep: true,
+})
+
 // 配置时
 watch(
   () => props.chartConfig.commonData,

src/packages/components/Charts/Pies/PieCommon/config.ts

@@ -39,7 +39,7 @@ const option = {
     {
       type: 'pie',
       radius: ['40%', '65%'],
-      center: ['50%', '60%'],
+      center: ['50%', '50%'],
       roseType: false,
       avoidLabelOverlap: false,
       itemStyle: {

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

@@ -133,6 +133,14 @@ watch(
   }
 )
 
+watch(
+  () => props.chartConfig.option.series.length,
+  (v) => {
+    if(v === 1) return
+    else props.chartConfig.option.series.splice(1)
+  }
+)
+
 // const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
 //   clearPieInterval()
 //   if (props.chartConfig.option.isCarousel) {

src/packages/components/Charts/Pies/PieCommon1/config.ts

@@ -39,7 +39,7 @@ const option = {
     {
       type: 'pie',
       radius: ['40%', '65%'],
-      center: ['50%', '60%'],
+      center: ['50%', '50%'],
       roseType: false,
       avoidLabelOverlap: false,
       itemStyle: {

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

@@ -133,6 +133,14 @@ watch(
   }
 )
 
+watch(
+  () => props.chartConfig.option.series.length,
+  (v) => {
+    if(v === 1) return
+    else props.chartConfig.option.series.splice(1)
+  }
+)
+
 // const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
 //   clearPieInterval()
 //   if (props.chartConfig.option.isCarousel) {

src/packages/components/Charts/Pies/PieCommon2/config.ts

@@ -9,13 +9,15 @@ export const includes = ['legend']
 export enum PieTypeEnum {
   NORMAL = '常规图',
   RING = '环形图',
-  ROSE = '玫瑰图'
+  ROSE = '玫瑰图',
+  RINGROSE = '环形玫瑰图',
 }
 
 export const PieTypeObject = {
   [PieTypeEnum.NORMAL]: 'normal',
   [PieTypeEnum.RING]: 'ring',
-  [PieTypeEnum.ROSE]: 'rose'
+  [PieTypeEnum.ROSE]: 'rose',
+  [PieTypeEnum.RINGROSE]: 'ringrose',
 }
 
 // 其它配置
@@ -39,7 +41,7 @@ const option = {
     {
       type: 'pie',
       radius: ['40%', '65%'],
-      center: ['50%', '60%'],
+      center: ['50%', '50%'],
       roseType: false,
       avoidLabelOverlap: false,
       itemStyle: {

src/packages/components/Charts/Pies/PieCommon2/config.vue

@@ -2,11 +2,11 @@
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
   <CollapseItem name="饼图配置" :expanded="true">
-<!--    <SettingItemBox name="类型">-->
+    <SettingItemBox name="类型" :alone="true">
-<!--      <SettingItem>-->
+      <SettingItem>
-<!--        <n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />-->
+        <n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />
-<!--      </SettingItem>-->
+      </SettingItem>
-<!--    </SettingItemBox>-->
+    </SettingItemBox>
     <SettingItemBox name="动画" :alone="true">
       <SettingItem>
         <n-space>
@@ -77,17 +77,21 @@ const props = defineProps({
   }
 })
 const fontWeightOptions = [
-  {
+  // {
-    label: PieTypeEnum.NORMAL,
+  //   label: PieTypeEnum.NORMAL,
-    value: PieTypeObject[PieTypeEnum.NORMAL]
+  //   value: PieTypeObject[PieTypeEnum.NORMAL]
-  },
+  // },
-  {
+  // {
-    label: PieTypeEnum.RING,
+  //   label: PieTypeEnum.RING,
-    value: PieTypeObject[PieTypeEnum.RING]
+  //   value: PieTypeObject[PieTypeEnum.RING]
-  },
+  // },
   {
     label: PieTypeEnum.ROSE,
     value: PieTypeObject[PieTypeEnum.ROSE]
+  },
+  {
+    label: PieTypeEnum.RINGROSE,
+    value: PieTypeObject[PieTypeEnum.RINGROSE]
   }
 ]
 

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

@@ -109,9 +109,12 @@ watch(
       } else if (newData === 'ring') {
         props.chartConfig.option.series[0].radius = ['40%', '65%']
         props.chartConfig.option.series[0].roseType = false
-      } else {
+      } else if (newData === 'rose') {
         props.chartConfig.option.series[0].radius = '70%'
         props.chartConfig.option.series[0].roseType = true
+      } else if (newData === 'ringrose') {
+        props.chartConfig.option.series[0].radius = ['30%', '65%']
+        props.chartConfig.option.series[0].roseType = true
       }
     } catch (error) {
       console.log(error)
@@ -133,6 +136,14 @@ watch(
   }
 )
 
+watch(
+  () => props.chartConfig.option.series.length,
+  (v) => {
+    if(v === 1) return
+    else props.chartConfig.option.series.splice(1)
+  }
+)
+
 // const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
 //   clearPieInterval()
 //   if (props.chartConfig.option.isCarousel) {

src/packages/components/Informations/Texts/TextGradient/config.ts

@@ -6,6 +6,7 @@ import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore
 
 export const option = {
   dataset: '我是渐变文本',
+  showUnit: false,
   size: 20,
   gradient: {
     from: '#0000FFFF',

src/packages/components/Informations/Texts/TextGradient/config.vue

@@ -4,6 +4,15 @@
       <setting-item>
         <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
       </setting-item>
+      <SettingItem>
+        <n-text :depth="3">开启数据时，将会覆盖此文本</n-text>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.showUnit" size="small" />
+          <n-text>展示单位</n-text>
+        </n-space>
+      </SettingItem>
     </setting-item-box>
   </collapse-item>
   <collapse-item name="样式" :expanded="true">

src/packages/components/Informations/Texts/TextGradient/index.ts

@@ -9,6 +9,6 @@ export const TextGradientConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.ECHARTS,
   image: 'text_gradient.png'
 }

src/packages/components/Informations/Texts/TextGradient/index.vue

@@ -1,16 +1,22 @@
 <template>
   <div class="go-text-box">
     <n-gradient-text :size="size" :gradient="gradient">
-      {{ option.dataset }}
+      <template v-if="!dataEnable">
+        {{ option.dataset }}
+      </template>
+      <template v-else>
+        {{ dataValue }}{{ option.showUnit ? dataUnit : '' }}
+      </template>
     </n-gradient-text>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import { useChartDataFetch } from '@/hooks'
+import { useChartCommonData } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { option as configOption } from './config'
+import { resultType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 const props = defineProps({
   chartConfig: {
@@ -20,16 +26,19 @@ const props = defineProps({
 })
 
 const option = shallowReactive({
-  dataset: configOption.dataset
+  dataset: configOption.dataset,
+  showUnit: configOption.showUnit
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { size, gradient } = toRefs(props.chartConfig.option)
 
+// 手动更新
 watch(
-  () => props.chartConfig.option.dataset,
+  [() => props.chartConfig.option.dataset, () => props.chartConfig.option.showUnit],
-  (newData: any) => {
+  ([newData, newShowUnit]: [any, boolean]) => {
     option.dataset = newData
+    option.showUnit = newShowUnit
   },
   {
     immediate: true,
@@ -37,9 +46,32 @@ watch(
   }
 )
 
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+const dataEnable = ref()
-  option.dataset = newData
+const dataValue = ref()
-})
+const dataUnit = ref()
+watch(
+  () => props.chartConfig.commonData,
+  newData => {
+    try {
+      const data = newData[newData.currentSource] as Object & { enable: boolean, result: resultType }
+      dataEnable.value = data.enable
+      dataValue.value = data.result.value
+      dataUnit.value = data.result.unit
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+//   option.dataset = newData
+// })
+
+useChartCommonData(props.chartConfig, useChartEditStore)
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Photos/index.ts

@@ -1,4 +1,4 @@
 import Private from './Private'
-import Share from './Share'
+// import Share from './Share'
 
-export const PhotoList = [...Private, ...Share]
+export const PhotoList = [...Private]

src/packages/public/publicConfig.ts

@@ -72,6 +72,16 @@ const commonData: commonDataType = {
     with_device_name: false,
     space_complete_name_prefix: false,
   },
+  monthAlarmClass: {
+    enable: false,
+    confirm_statuses: ['ok', 'not'],
+    recovery_statuses: ['ok', 'not'],
+    levels: [1, 2, 3, 4],
+    space_complete_id: ''
+  },
+  deviceClass: {
+    enable: false
+  },
   singlePoint: {
     enable: false,
     pointId: '',

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

@@ -261,7 +261,11 @@ export enum CurrentSourceEnum {
   // 测点实时值
   POINTREALTIME = 'pointRealTime',
   // 单测点实时值
-  SINGLEPOINT = 'singlePoint'
+  SINGLEPOINT = 'singlePoint',
+  // 设备分类统计
+  DEVICECLASS = 'deviceClass',
+  // 当月告警分类统计
+  MONTHALARMCLASS = 'monthAlarmClass'
 }
 
 // 测点历史参数
@@ -317,13 +321,32 @@ export interface SinglePointType {
   result: resultType
 }
 
+// 设备分类统计 无参数类型
+export interface NoParamsType {
+  enable: boolean
+}
+
+// 当月告警分类统计
+export interface MonthAlarmClassType {
+  enable: boolean
+  confirm_statuses: string[]
+  recovery_statuses: string[]
+  levels: number[]
+  space_complete_id: string
+}
+
 // 通用组件数据
 export interface commonDataType {
+  // 多数据
   currentSource: CurrentSourceEnum
   pointHistory: PointHistoryType
   energyUseHistory: EnergyUseHistoryType
   recordValueHistory: RecordValueHistoryType
   pointRealTime: PointRealTimeType
+  monthAlarmClass: MonthAlarmClassType
+  // 多数据无参数
+  deviceClass: NoParamsType
+  // 单数据
   singlePoint: SinglePointType
 }
 

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

@@ -0,0 +1,61 @@
+<template>
+  <setting-item-box name="启用数据" :alone="true">
+    <n-space justify="start">
+      <n-switch v-model:value="target.enable"/>
+    </n-space>
+  </setting-item-box>
+  <setting-item-box name="告警确认" :alone="true">
+    <n-select multiple v-model:value="target.confirm_statuses" :options="options1" size="small"/>
+  </setting-item-box>
+  <setting-item-box name="告警恢复" :alone="true">
+    <n-select multiple v-model:value="target.recovery_statuses" :options="options1" size="small"/>
+  </setting-item-box>
+  <setting-item-box name="告警等级" :alone="true">
+    <n-select multiple v-model:value="target.levels" :options="options2" size="small"/>
+  </setting-item-box>
+  <setting-item-box name="空间ID" :alone="true">
+    <n-input v-model:value="target.space_complete_id" size="small"/>
+  </setting-item-box>
+</template>
+
+<script lang="ts" setup>
+import {watch, reactive, computed} from 'vue'
+import type {Ref} from 'vue'
+import {SettingItemBox} from '@/components/Pages/ChartItemSetting'
+import {useTargetData} from '../../hooks/useTargetData.hook'
+import {DateOptions, PolicyOptions} from './ComponentsType.d'
+import {icon} from '@/plugins/icon'
+import {commonDataType, RecordValueHistoryType} from '@/store/modules/chartEditStore/chartEditStore.d'
+
+const {CloseIcon, AddIcon} = icon.ionicons5
+
+const {targetData} = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string }> }
+
+const target = computed(() => {
+  return targetData.value.commonData[targetData.value.commonData.currentSource]
+})
+
+// const recordValueHistory: Ref<RecordValueHistoryType> = computed(() => targetData.value.commonData.recordValueHistory)
+
+type computeIdsItemType = {
+  id: string,
+  value: number | null
+}
+
+const options1 = [
+  {label: 'ok', value: 'ok'},
+  {label: 'not', value: 'not'},
+]
+
+const options2 = [
+  {label: 1, value: 1},
+  {label: 2, value: 2},
+  {label: 3, value: 3},
+  {label: 4, value: 4},
+]
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+  <setting-item-box name="启用数据" :alone="true">
+    <n-space justify="start">
+      <n-switch v-model:value="currentObj.enable"/>
+    </n-space>
+  </setting-item-box>
+</template>
+
+<script lang="ts" setup>
+import {computed} from 'vue'
+import type {Ref} from 'vue'
+import {SettingItemBox} from '@/components/Pages/ChartItemSetting'
+import {useTargetData} from '../../hooks/useTargetData.hook'
+import {commonDataType} from '@/store/modules/chartEditStore/chartEditStore.d'
+const {targetData} = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string }> }
+
+const currentObj = computed(() => {
+  return targetData.value.commonData[targetData.value.commonData.currentSource]
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -145,6 +145,16 @@ export const sourceOptions: sourceOptionsItemType[] = [
     value: CurrentSourceEnum.POINTREALTIME,
     type: optionTypeEnum.MULTIPLE,
   },
+  {
+    label: '设备分类统计',
+    value: CurrentSourceEnum.DEVICECLASS,
+    type: optionTypeEnum.MULTIPLE,
+  },
+  {
+    label: '当月告警分类统计',
+    value: CurrentSourceEnum.MONTHALARMCLASS,
+    type: optionTypeEnum.MULTIPLE,
+  },
   {
     label: '单测点实时值',
     value: CurrentSourceEnum.SINGLEPOINT,

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

@@ -8,6 +8,8 @@
       <EnergyUseHistory v-else-if="matchComponent(CurrentSourceEnum.ENERGYUSEHISTORY)"/>
       <RecordValueHistory v-else-if="matchComponent(CurrentSourceEnum.RECORDVALUEHISTORY)"/>
       <PointRealTime v-else-if="matchComponent(CurrentSourceEnum.POINTREALTIME)"/>
+      <MonthAlarmClass v-else-if="matchComponent(CurrentSourceEnum.MONTHALARMCLASS)"/>
+      <NoParam v-else/>
     </template>
     <template v-else-if="IsCommonSingle">
       <setting-item-box name="数据源" :alone="true">
@@ -60,6 +62,8 @@ import EnergyUseHistory from './components/EnergyUseHistory.vue'
 import RecordValueHistory from './components/RecordValueHistory.vue'
 import PointRealTime from './components/PointRealTime.vue'
 import SinglePoint from './components/SinglePoint.vue'
+import MonthAlarmClass from './components/MonthAlarmClass.vue'
+import NoParam from './components/NoParam.vue'
 import { computed } from 'vue'
 import type { Ref } from 'vue'
 import { loadAsyncComponent } from '@/utils'
@@ -72,6 +76,7 @@ import { PieCircleConfig } from '@/packages/components/Charts/Pies/PieCircle/ind
 import { TextBarrageConfig } from "@/packages/components/Informations/Texts/TextBarrage/index";
 import { TextCommonConfig } from "@/packages/components/Informations/Texts/TextCommon/index";
 import { TextGradientConfig } from "@/packages/components/Informations/Texts/TextGradient/index";
+import { WaterPoloConfig } from "@/packages/components/Charts/Mores/WaterPolo/index";
 
 // const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
 
@@ -96,6 +101,7 @@ const IsCommonSingle = computed(() => {
     TextBarrageConfig,
     TextCommonConfig,
     TextGradientConfig,
+    WaterPoloConfig,
   ]
   const { package:packageStr, category, key } = targetData.value.chartConfig
   const flag = singleCharArr.some(_ => {