perf: 优化折线图柱状图属性可以进行多选

@@ -92,7 +92,8 @@ export interface NodeDataDataSourceJsonType {
   deviceId: string
   deviceProfileId: string
   deviceProfileTemplateId?: string
-  attr: string
+  attr: string | string[]
+  deviceName?: string
 
   enable: boolean
   chartOption?: ChartOptionType

@@ -40,11 +40,10 @@ const contentDataStore = useContentDataStoreWithOut()
 export const getFormSchemas = (event: EventTypeEnum): FormSchema[] => {
   const { getNodeData, getCellInfo, getDeviceInfo } = usePublicFormContext()
   const { dataSourceJson } = unref(getNodeData) || {}
-  const { deviceProfileId, deviceId } = dataSourceJson || {}
+  const { deviceProfileId } = dataSourceJson || {}
   // transportType:判断是什么类型的设备 code:设备地址码  deviceType:设备类型
-  let codeType: string | null = ''
-  const { transportType, deviceType, codeType: deviceCodeType } = unref(getDeviceInfo) || {}
-  codeType = deviceCodeType || (deviceId ? contentDataStore.diveceDetailMap?.[deviceId]?.codeType : null)
+  const { transportType, deviceType, codeType } = unref(getDeviceInfo) || {}
+
   const isTemplate = contentDataStore.isTemplate // 判断是否是模板
 
   return [

@@ -63,6 +63,7 @@ export const formSchemas = (componentKey?: string): FormSchema[] => {
           onSelect(value: string, option: DeviceItemType) {
             formModel[ContentDataFieldsEnum.DEVICE_PROFILE_ID] = value ? option.deviceProfileId : null
             formModel[ContentDataFieldsEnum.ATTR] = null
+            formModel[ContentDataFieldsEnum.DEVICE_NAME] = value ? option.alias || option.name : ''
           },
           filterOption: (inputValue: string, option: DeviceItemType) => {
             return option.alias?.includes?.(inputValue) || option.name?.includes?.(inputValue)
@@ -71,6 +72,12 @@ export const formSchemas = (componentKey?: string): FormSchema[] => {
       },
     },
     {
+      field: ContentDataFieldsEnum.DEVICE_NAME,
+      label: ContentDataFieldsNameEnum.deviceName,
+      component: ComponentEnum.INPUT,
+      ifShow: false,
+    },
+    {
       field: ContentDataFieldsEnum.ATTR,
       label: ContentDataFieldsNameEnum.ATTR,
       component: ComponentEnum.API_SELECT,

@@ -6,3 +6,10 @@ export function useLatestMessageValue(message: SubscriptionData, attr: string) {
   const [ts, latestValue = null] = lateset || []
   return { ts, latestValue }
 }
+
+export function useLatestMultipleMessageValue(message: SubscriptionData, attr: string[], Fn: (attribute: string, value: any, timespan: number) => void) {
+  attr.forEach((item) => {
+    const [ts = null, latestValue = null] = message[item][0] || []
+    Fn(item, ts, latestValue)
+  })
+}

@@ -34,13 +34,11 @@ function initChartInstance() {
 const { onMessage } = useOnMessage({
   onReceiveDataSourceMessage(commandSource, message) {
     const { data } = commandSource
-    const { deviceInfo, attrInfo } = data || {}
-    const { deviceName } = deviceInfo || {}
     const { attr } = data as NodeDataDataSourceJsonType
     const { latestValue } = useLatestMessageValue(message.data, attr)
     unref(chartInstance)?.setOption({
       title: {
-        text: `${deviceName || ''}-${attrInfo.name || ''}`,
+        // text: `${deviceName || ''}-${attrInfo.name || ''}`,
       },
       series: [{
         data: getSetValue(Number(latestValue)),

@@ -3,7 +3,8 @@ import { Button, Divider } from 'ant-design-vue'
 import { nextTick, onMounted, ref, unref } from 'vue'
 import { formSchemas } from '../config'
 import { ChartComponentEnum } from '..'
-import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'
+import { DataSourceForm } from '../component/index'
+// import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'
 
 import { BasicForm, useForm } from '@/components/Form'
 import { FormLayoutEnum } from '@/components/Form/src/enum'
@@ -46,7 +47,7 @@ const handleSubmit = async () => {
     if (contentDataStore.getIsTemplate)
       dataSourceJson = { ...value, deviceProfileId: value?.deviceProfileTemplateId, deviceId: null }
 
-    await saveNodeAllData({ dataSourceJson: { ...dataSourceJson, chartOption: { ...values } } })
+    await saveNodeAllData({ dataSourceJson: { ...dataSourceJson, attr: typeof value.attr == 'string' ? [value.attr] : value.attr, chartOption: { ...values } } })
     savePageContent()
     createMessage.success('操作成功~')
   }
@@ -57,9 +58,9 @@ const handleSubmit = async () => {
 
 const handleSetFormValues = async () => {
   const { dataSourceJson } = unref(getNodeData) || {}
-  const { deviceId, attr, chartOption, deviceProfileId, deviceProfileTemplateId } = dataSourceJson || {}
+  const { deviceId, attr, chartOption, deviceProfileId, deviceProfileTemplateId, deviceName } = dataSourceJson || {}
   await nextTick()
-  unref(dataSourceElRef)?.setFieldsValue({ deviceId, attr, deviceProfileId, deviceProfileTemplateId })
+  unref(dataSourceElRef)?.setFieldsValue({ deviceId, attr, deviceName, deviceProfileId, deviceProfileTemplateId })
   setFieldsValue({ ...chartOption })
 }
 

 import { isLightboxMode } from '@/utils/env'
 
-const data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-const seriesList = [
-  { value: 120, name: '123', itemStyle: { color: '#5470c6' } },
-  { value: 150, name: '456', itemStyle: { color: '#5470c6' } },
-  { value: 40, name: '789', itemStyle: { color: '#5470c6' } },
-  { value: 139, name: '111', itemStyle: { color: '#5470c6' } },
-  { value: 130, name: '222', itemStyle: { color: '#5470c6' } },
-  { value: 125, name: '333', itemStyle: { color: '#5470c6' } },
-  { value: 110, name: '444', itemStyle: { color: '#5470c6' } },
-]
 export const defaultOption = {
-  color: ['#3398DB'],
   tooltip: {
-    // 提示框
-    trigger: 'item',
-    confine: true,
-    axisPointer: {
-      type: 'shadow',
-    },
   },
-  xAxis: {
-    type: 'category',
-    data: isLightboxMode() ? [] : data,
-    axisTick: {
-      alignWithLabel: true,
+  calculable: true,
+  xAxis: [
+    {
+      type: 'category',
+      // prettier-ignore
+      data: isLightboxMode() ? [] : ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
     },
+  ],
+  legend: {
+    top: '8%',
+    left: 'center',
+    data: [''],
   },
+
   grid: {
-    top: '10%',
-    left: '10%',
-    bottom: '10%',
-  },
-  yAxis: {
-    type: 'value',
+    top: '25%',
+    left: '6%',
+    right: '10%',
+    bottom: '8%',
+    containLabel: true,
   },
+  yAxis: [
+    {
+      type: 'value',
+    },
+  ],
   series: [
     {
-      name: '',
+      name: 'Rainfall',
+      type: 'bar',
+      data: [
+        25.6, 76.7, 42.0, 27.0, 23.2,
+      ],
+    },
+    {
+      name: 'Evaporation',
       type: 'bar',
-      barWidth: '60%',
-      data: isLightboxMode () ? [] : seriesList,
+      data: isLightboxMode()
+        ? []
+        : [
+            28.7, 32.6, 70.7, 29.0, 26.4,
+          ],
     },
   ],
 }

 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, toRaw, unref } from 'vue'
 import { init } from 'echarts'
 import type { ECharts, EChartsOption } from 'echarts'
 import { defaultOption } from './index.config'
@@ -10,6 +10,7 @@ import { SocketSubscriberEnum } from '@/enums/datasource'
 import type { SubscriptionData } from '@/core/websocket/type/message'
 import { formatToDateTime } from '@/utils/dateUtil'
 import type { CommandSource } from '@/core/websocket/processor'
+import { useProductsStore } from '@/store/modules/products'
 
 const props = defineProps<{
   config: CreateComponentType
@@ -21,40 +22,80 @@ const chartElRef = ref<Nullable<HTMLDivElement>>()
 
 const chartInstance = ref<Nullable<ECharts>>()
 
+const seriesData = ref<any>([])
+const XAxisData = ref<any>([])
+const titleATTR = ref<string[] | any>([])
+
 function initChartInstance() {
   chartInstance.value = init(unref(chartElRef))
   chartInstance.value.setOption(defaultOption)
 }
 
+const productsStore = useProductsStore()
+
 const handleHistoryData = (commandSource: CommandSource, message: SubscriptionData) => {
   const { data } = commandSource
-  const { attrInfo, deviceInfo, attr } = data as NodeDataDataSourceJsonType
-  const { deviceName } = deviceInfo || {}
+  const { attr, deviceName } = data as NodeDataDataSourceJsonType as any
 
-  const historyData = message[attr]
-  const xAxisData: string[] = []
-  const seriesData: number[] = []
+  attr.forEach((item: any) => { // 得到所有时间
+    XAxisData.value.push(...message[item].map((item1) => {
+      const [ts] = item1
+      return ts
+    }))
+  })
+  XAxisData.value = Array.from(new Set(XAxisData.value)).sort((a: any, b: any) => a - b)// 去重获取到的时间
+  // 初始化有几个柱
+  seriesData.value.forEach((item: any) => {
+    item.data = unref(XAxisData).map((time: any) => ({ name: time, value: '' }))
+  })
 
-  for (const item of historyData) {
-    const [ts, value] = item
-    xAxisData.push(formatToDateTime(ts))
-    seriesData.push(value)
-  }
+  // 跟每个柱添加数据
+  seriesData.value.forEach((item: any) => {
+    item.data.forEach((item1: any) => {
+      message[item.attribute].forEach((messageItem) => {
+        const [ts, value] = messageItem
+        if (item1.name === ts)
+          item1.value = value || ''
+          // item1.name = formatToDateTime(item1.name)
+      })
+    })
+  })
 
   unref(chartInstance)?.setOption({
     title: {
-      text: `${deviceName || ''}-${attrInfo.name || ''}`,
+      text: `${deviceName || ''}`,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: toRaw(unref(XAxisData.value.map((item: string | number) => formatToDateTime(item)))),
+      },
+    ],
+    legend: {
+      data: unref(titleATTR),
     },
-    xAxis: { data: xAxisData },
-    series: { data: seriesData },
+    series: toRaw(unref(seriesData).map((item: { type: string; name: string; data: any; attribute: string }) => {
+      const { type, name, data } = item
+      return {
+        type,
+        name,
+        data: data.map((item: any) => item.value),
+      }
+    })),
   } as EChartsOption)
 }
 
 const { onMessage } = useOnMessage({
   onReceiveDataSourceMessage(commandSource, message) {
     const { data } = commandSource
-    const { chartOption } = data as NodeDataDataSourceJsonType
+    const { chartOption, attr, deviceProfileId } = data as NodeDataDataSourceJsonType
     const { queryType } = chartOption || {}
+    if (!seriesData.value.length) {
+      (attr as string[]).forEach((item: string) => {
+        titleATTR.value.push(productsStore.getObjectModelByIdWithIdentifier(deviceProfileId, item)?.functionName)
+        seriesData.value.push({ attribute: item, data: [], type: 'bar', name: productsStore.getObjectModelByIdWithIdentifier(deviceProfileId, item)?.functionName })
+      })
+    }
 
     if (queryType === SocketSubscriberEnum.HISTORY_CMDS)
       handleHistoryData(commandSource, message.data)

@@ -36,8 +36,6 @@ onMounted(() => {
 
 const onReceiveDataSourceMessage = (commandSource: CommandSource, message: SubscriptionUpdateMsg) => {
   const { data } = commandSource
-  const { deviceInfo, attrInfo } = data || {}
-  const { deviceName } = deviceInfo || {}
   const { attr } = data as NodeDataDataSourceJsonType
   const { latestValue } = useLatestMessageValue(message.data, attr)
   unref(chartInstance)?.setOption({
@@ -46,7 +44,7 @@ const onReceiveDataSourceMessage = (commandSource: CommandSource, message: Subsc
 
     }],
     title: {
-      text: `${deviceName || ''}-${attrInfo.name || ''}`,
+      // text: `${deviceName || ''}-${attrInfo.name || ''}`,
     },
   } as EChartsOption)
 }

@@ -3,7 +3,9 @@ import { Button, Divider } from 'ant-design-vue'
 import { nextTick, onMounted, ref, unref } from 'vue'
 import { formSchemas } from '../config'
 import { ChartComponentEnum } from '..'
-import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'
+
+import { DataSourceForm } from '../component/index'
+// import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'
 
 import { BasicForm, useForm } from '@/components/Form'
 import { FormLayoutEnum } from '@/components/Form/src/enum'
@@ -33,9 +35,9 @@ const dataSourceElRef = ref<Nullable<InstanceType<typeof DataSourceForm>>>()
 
 const handleSetFormValues = async () => {
   const { dataSourceJson } = unref(getNodeData) || {}
-  const { deviceId, attr, chartOption, deviceProfileId, deviceProfileTemplateId } = dataSourceJson || {}
+  const { deviceId, attr, chartOption, deviceProfileId, deviceProfileTemplateId, deviceName } = dataSourceJson || {}
   await nextTick()
-  unref(dataSourceElRef)?.setFieldsValue({ deviceId, attr, deviceProfileId, deviceProfileTemplateId })
+  unref(dataSourceElRef)?.setFieldsValue({ deviceId, attr, deviceProfileId, deviceProfileTemplateId, deviceName })
   setFieldsValue({ ...chartOption })
 }
 
@@ -54,7 +56,7 @@ const handleSubmit = async () => {
     if (contentDataStore.getIsTemplate)
       dataSourceJson = { ...value, deviceProfileId: value?.deviceProfileTemplateId, deviceId: null }
 
-    saveNodeAllData({ dataSourceJson: { ...dataSourceJson, chartOption: { ...values } } })
+    saveNodeAllData({ dataSourceJson: { ...dataSourceJson, attr: typeof value.attr == 'string' ? [value.attr] : value.attr, chartOption: { ...values } } })
     createMessage.success('操作成功~')
     savePageContent()
   }

@@ -3,31 +3,35 @@ import { isLightboxMode } from '@/utils/env'
 
 export const getDefaultOption = (): EChartsOption => {
   return {
-    tooltip: {
-      trigger: 'item',
-      confine: true,
+    legend: {
+      top: '10%',
+      left: 'center',
+      data: [''],
     },
     grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
+      top: '30%',
+      left: '6%',
+      right: '10%',
+      bottom: '8%',
       containLabel: true,
     },
-    dataset: {
-      source: isLightboxMode()
+    xAxis: {
+      type: 'category',
+    },
+    yAxis: {
+      type: 'value',
+      boundaryGap: [0, '100%'],
+    },
+    series: [{
+      type: 'line',
+      name: '温度',
+      data: isLightboxMode()
         ? []
         : [
-            ['product', '2015', '2016', '2017'],
-            ['Matcha Latte', 43.3, 85.8, 93.7],
-            ['Milk Tea', 83.1, 73.4, 55.1],
-            ['Cheese Cocoa', 86.4, 65.2, 82.5],
-            ['Walnut Brownie', 72.4, 53.9, 39.1],
-          ],
-    },
-    xAxis: { type: 'category' },
-    yAxis: {},
-    series: [
-      { type: 'line' },
-    ],
+            ['Matcha Latte', 43.3],
+            ['Milk Tea', 83.1],
+            ['Cheese Cocoa', 86.4],
+            ['Walnut Brownie', 72.4]],
+    }],
   }
 }

 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
-import type { DatasetComponentOption, ECharts, EChartsOption } from 'echarts'
+import { computed, onMounted, onUnmounted, ref, toRaw, unref } from 'vue'
+import type { ECharts, EChartsOption } from 'echarts'
 import { init } from 'echarts'
 import { getDefaultOption } from './index.config'
 import type { CreateComponentType, RenderComponentExposeType } from '@/core/Library/types'
@@ -9,8 +9,12 @@ import type { NodeDataDataSourceJsonType } from '@/api/node/model'
 import type { SubscriptionData } from '@/core/websocket/type/message'
 import { SocketSubscriberEnum } from '@/enums/datasource'
 import { formatToDateTime } from '@/utils/dateUtil'
-import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
 import type { CommandSource } from '@/core/websocket/processor'
+import { useLatestMultipleMessageValue } from '@/core/Library/hook/useLatestMessageValue'
+import { useProductsStore } from '@/store/modules/products'
+interface IList {
+  time: string | number
+}
 
 const props = defineProps<{
   config: CreateComponentType
@@ -22,67 +26,126 @@ const chartElRef = ref<Nullable<HTMLDivElement>>()
 
 const chartInstance = ref<Nullable<ECharts>>()
 
+const maxLength = ref<number>(20)
+
+const timeList = ref<number[] | string[] | any>([])// 存储XAxis的值
+const seriesData = ref<any>([])// 存储series的值
+const titleATTR = ref<string[] | any>([])
+
+const productsStore = useProductsStore()
+
 function initChartInstance() {
   chartInstance.value = init(unref(chartElRef))
   chartInstance.value.setOption(getDefaultOption())
 }
 
-const handleHistoryData = (message: SubscriptionData, attr: string) => {
-  const data = message[attr]
-  const xAxisData: string[] = []
-  const seriesData: number[] = []
-
-  for (const item of data) {
-    const [ts, value] = item
-    xAxisData.push(formatToDateTime(ts))
-    seriesData.push(value)
-  }
+const handleHistoryData = (commandSource: CommandSource, message: SubscriptionData, attr: string[] | string) => {
+  const { data } = commandSource || {}
+  const { deviceName } = data as NodeDataDataSourceJsonType
 
+  (attr as string[]).forEach((item) => {
+    timeList.value.push(...message[item].map((item1) => {
+      const [ts] = item1
+      return ts
+    }))
+  })
+  timeList.value = Array.from(new Set(timeList.value))?.sort((a: any, b: any) => a - b)// 去重获取到的时间
+  seriesData.value.forEach((item: any) => {
+    item.data = unref(timeList).map((time: any) => ({ name: time, value: null }))
+  })
+  seriesData.value.forEach((item: any) => {
+    item.data.forEach((item1: any) => {
+      message[item.attribute].forEach((messageItem) => {
+        const [ts, value] = messageItem
+        if (item1.name === ts) {
+          item1.value = value || undefined
+          item1.name = formatToDateTime(item1.name)
+        }
+      })
+    })
+  })
   unref(chartInstance)?.setOption({
-    xAxis: { data: xAxisData },
-    series: { data: seriesData },
+    title: {
+      text: `${deviceName || ''}`,
+    },
+    xAxis: {
+      data: toRaw(unref(timeList.value.map((item: string | number) => formatToDateTime(item)))),
+    },
+    series: toRaw(
+      unref(seriesData).map((item: { type: string; name: string; data: any }) => {
+        const { type, name, data } = item
+        return {
+          type,
+          name,
+          data,
+        }
+      }),
+    ),
   } as EChartsOption)
 }
 
-function sliceData(data: any[], maxLength = 20) {
-  if (data.length > maxLength)
-    return data.slice(1)
-  return data
-}
+// const contentDataStore = useContentDataStoreWithOut()
 
-const handlerTimeSeriesData = (commandSource: CommandSource, message: SubscriptionData, attr: string) => {
+const handlerTimeSeriesData = (commandSource: CommandSource, message: SubscriptionData, attr: string[] | string) => {
   const { data } = commandSource
-  const { attrInfo, deviceInfo } = data as NodeDataDataSourceJsonType
-  const { deviceName } = deviceInfo || {}
-  const { ts, latestValue } = useLatestMessageValue(message, attr)
-  const option = unref(chartInstance)?.getOption() as EChartsOption
-  const oldDataset = (option.dataset as DatasetComponentOption[])?.[0].source as Recordable[]
-  oldDataset.push({
-    ts: formatToDateTime(ts),
-    [attr]: latestValue,
+  const { deviceName } = data as NodeDataDataSourceJsonType
+  const list: IList | any = {}// 记录时间
+  useLatestMultipleMessageValue(message, attr as any, (attribute, timespan, value) => {
+    list.time = timespan || list.time
+    seriesData.value.forEach((item: any) => {
+      if (item.attribute === attribute) {
+        item.data.push({
+          name: formatToDateTime(list.time),
+          value: value || undefined,
+        })
+      }
+      if (item.data.length > unref(maxLength))
+        item.data.shift()
+    })
   })
+  list.time && timeList.value.push(formatToDateTime(list.time))
+  if (unref(timeList).length > unref(maxLength))
+    timeList.value.shift()
 
   unref(chartInstance)?.setOption({
     title: {
-      text: `${deviceName || ''}-${attrInfo.name || ''}`,
+      text: `${deviceName || ''}`,
     },
-    dataset: {
-      dimensions: ['ts', attr],
-      source: sliceData(oldDataset),
+    xAxis: {
+      data: toRaw(unref(timeList)),
     },
+    legend: {
+      data: unref(titleATTR),
+    } as any,
+    series: toRaw(
+      unref(seriesData).map((item: { type: string; name: string; data: any }) => {
+        const { type, name, data } = item
+        return {
+          type,
+          name,
+          data,
+        }
+      }),
+    ),
   } as EChartsOption)
 }
 
 const { onMessage } = useOnMessage({
   onReceiveDataSourceMessage(commandSource, message) {
     const { data } = commandSource
-    const { chartOption, attr } = data as NodeDataDataSourceJsonType
+    const { chartOption, attr, deviceProfileId } = data as NodeDataDataSourceJsonType
     const { queryType } = chartOption || {}
+    if (!seriesData.value.length) {
+      (attr as string[]).forEach((item: string) => {
+        titleATTR.value.push(productsStore.getObjectModelByIdWithIdentifier(deviceProfileId, item)?.functionName)
+        seriesData.value.push({ attribute: item, data: [], type: 'line', name: productsStore.getObjectModelByIdWithIdentifier(deviceProfileId, item)?.functionName })
+      })
+    }
 
     if (queryType === SocketSubscriberEnum.TS_SUB_CMDS)
       handlerTimeSeriesData(commandSource, message.data, attr)
     else if (queryType === SocketSubscriberEnum.HISTORY_CMDS)
-      handleHistoryData(message.data, attr)
+      handleHistoryData(commandSource, message.data, attr)
   },
 })
 

@@ -34,13 +34,11 @@ function initChartInstance() {
 const { onMessage } = useOnMessage({
   onReceiveDataSourceMessage(commandSource, message) {
     const { data } = commandSource
-    const { deviceInfo, attrInfo } = data || {}
-    const { deviceName } = deviceInfo || {}
     const { attr } = data as NodeDataDataSourceJsonType
     const { latestValue } = useLatestMessageValue(message.data, attr)
     unref(chartInstance)?.setOption({
       title: {
-        text: `${deviceName || ''}-${attrInfo.name || ''}`,
+        // text: `${deviceName || ''}-${attrInfo.name || ''}`,
       },
       series: [{
         data: getSetValue(Number(latestValue)),

@@ -26,13 +26,11 @@ function initChartInstance() {
 const { onMessage } = useOnMessage({
   onReceiveDataSourceMessage(commandSource, message) {
     const { data } = commandSource
-    const { deviceInfo, attrInfo } = (data || {}) as NodeDataDataSourceJsonType
-    const { deviceName } = deviceInfo || {}
     const { attr } = data as NodeDataDataSourceJsonType
     const { latestValue } = useLatestMessageValue(message.data, attr)
     unref(chartInstance)?.setOption({
       title: {
-        text: `${deviceName || ''}-${attrInfo.name || ''}`,
+        // text: `${deviceName || ''}-${attrInfo.name || ''}`,
       },
       series: [{
         data: [{

+import { unref } from 'vue'
+import { getDeviceAttributes, getListByConfigurationId, getListByDeviceProfileIds } from '@/api/device'
+import type { DeviceItemType, ThingsModelItemType } from '@/api/device/model'
+import type { FormSchema } from '@/components/Form'
+import { ComponentEnum } from '@/components/Form/src/enum'
+import { ContentDataFieldsEnum, ContentDataFieldsNameEnum, DataTypeEnum } from '@/enums/datasource'
+import { useContentDataStoreWithOut } from '@/store/modules/contentData'
+import type { ProductAndDevice } from '@/api/content/model'
+import { ControlComponentEnum } from '@/core/Library/packages/Control'
+import { useParseParams } from '@/core/LoadData'
+
+const contentDataStore = useContentDataStoreWithOut()
+export const formSchemas = (componentKey?: string): FormSchema[] => {
+  const isTemplate = contentDataStore.isTemplate // 判断是否是模板组态
+  const isTemplateLink = contentDataStore.getIsTemplateLink
+  const params = useParseParams()
+  const { configurationId } = params
+  return [
+    {
+      field: ContentDataFieldsEnum.DEVICE_PROFILE_ID,
+      label: ContentDataFieldsNameEnum.DEVICE_PROFILE_ID,
+      component: ComponentEnum.INPUT,
+      ifShow: false,
+    },
+    {
+      field: ContentDataFieldsEnum.DEVICE_PROFILE_TEMPLATE_ID, // 模板产品id
+      label: ContentDataFieldsNameEnum.DEVICE_PROFILE_ID,
+      component: ComponentEnum.API_SELECT,
+      ifShow: !!isTemplate,
+      required: !!isTemplate,
+      componentProps: ({ formModel }) => {
+        return {
+          options: (unref(contentDataStore.getProductAndDevice) || []).map((item: ProductAndDevice) => ({ label: item.profileName || item.name, value: item.profileId, transportType: item?.transportType, deviceType: item?.deviceType })),
+          placeholder: '请选择产品',
+          onSelect(value: string) {
+            formModel[ContentDataFieldsEnum.DEVICE_PROFILE_ID] = value
+            formModel[ContentDataFieldsEnum.ATTR] = []
+          },
+          getPopupContainer: () => document.body,
+        }
+      },
+    },
+    {
+      field: ContentDataFieldsEnum.DEVICE_ID,
+      label: ContentDataFieldsNameEnum.DEVICE_ID,
+      component: ComponentEnum.API_SELECT,
+      ifShow: !isTemplate,
+      required: !isTemplate,
+      componentProps: ({ formModel }) => {
+        const organizationId = window.useParseParams().organizationId
+        if (!organizationId) return
+        return {
+          showSearch: true,
+          api: async (params: Recordable) => {
+            if (isTemplateLink) return await getListByConfigurationId(configurationId!)
+            return await getListByDeviceProfileIds(params)
+          },
+          params: {
+            deviceProfileIds: unref(contentDataStore.getProductIds),
+            organizationId,
+          },
+          aliasField: 'alias',
+          fieldNames: { label: 'name', value: 'tbDeviceId' },
+          onSelect(value: string, option: DeviceItemType) {
+            formModel[ContentDataFieldsEnum.DEVICE_PROFILE_ID] = value ? option.deviceProfileId : null
+            formModel[ContentDataFieldsEnum.ATTR] = []
+            formModel[ContentDataFieldsEnum.DEVICE_NAME] = value ? option.alias || option.name : ''
+          },
+          filterOption: (inputValue: string, option: DeviceItemType) => {
+            return option.alias?.includes?.(inputValue) || option.name?.includes?.(inputValue)
+          },
+        }
+      },
+    },
+    {
+      field: ContentDataFieldsEnum.DEVICE_NAME,
+      label: ContentDataFieldsNameEnum.deviceName,
+      component: ComponentEnum.INPUT,
+      ifShow: false,
+    },
+    {
+      field: ContentDataFieldsEnum.ATTR,
+      label: ContentDataFieldsNameEnum.ATTR,
+      component: ComponentEnum.API_SELECT,
+      required: true,
+      componentProps: ({ formModel }) => {
+        const deviceProfileId = isTemplate ? formModel[ContentDataFieldsEnum.DEVICE_PROFILE_TEMPLATE_ID] : formModel[ContentDataFieldsEnum.DEVICE_PROFILE_ID]
+        return {
+          showSearch: true,
+          mode: 'multiple',
+          api: async (params: string) => {
+            if (!deviceProfileId) return []
+            const options = await getDeviceAttributes(params)
+            if (componentKey === ControlComponentEnum.SWITCH) { // 开关只返回bool
+              return options.filter((item) => {
+                return item.detail.dataType.type === DataTypeEnum.BOOL
+              })
+            }
+            return options
+          },
+          params: deviceProfileId,
+          fieldNames: { label: 'name', value: 'identifier' },
+          filterOption: (inputValue: string, option: ThingsModelItemType) => {
+            return option.name.includes(inputValue)
+          },
+        }
+      },
+    },
+  ]
+}

+export { default as DataSourceForm } from './index.vue'

+<script setup lang="ts">
+import { computed, unref } from 'vue'
+import type { RuleError } from 'ant-design-vue/lib/form/interface'
+import { formSchemas } from './config'
+import { FormLayoutEnum } from '@/components/Form/src/enum'
+import { BasicForm, useForm } from '@/components/Form'
+
+export interface ComponentExposeType {
+  getFieldsValue: () => any
+  setFieldsValue: (value: any) => void
+  validate: () => Promise<RuleError | any>
+}
+
+const props = defineProps<{ componentKey?: string }>()
+defineEmits(['fieldValueChange'])
+
+const getComponentKey = computed(() => {
+  return props.componentKey
+})
+
+const [registerForm, formActionType] = useForm({
+  schemas: formSchemas(unref(getComponentKey)),
+  showActionButtonGroup: false,
+  layout: FormLayoutEnum.HORIZONTAL,
+  labelWidth: 70,
+})
+
+const getFieldsValue = () => {
+  return formActionType.getFieldsValue()
+}
+
+const validate = async () => {
+  return await formActionType.validate()
+}
+
+const setFieldsValue = (value: Recordable) => {
+  formActionType.setFieldsValue(value)
+  formActionType.clearValidate()
+}
+
+defineExpose<ComponentExposeType>({
+  getFieldsValue,
+  setFieldsValue,
+  validate,
+})
+</script>
+
+<template>
+  <BasicForm @register="registerForm" @field-value-change="$emit('fieldValueChange')" />
+</template>

@@ -238,6 +238,7 @@ export enum ContentDataFieldsEnum {
   DEVICE_ID = 'deviceId',
   ORG_ID = 'orgId',
   ATTR = 'attr',
+  DEVICE_NAME = 'deviceName',
   VIDEO_FILTER = 'videoFilter',
   VIDEO_ID = 'id',
   VIDEO_URL = 'videoUrl',
@@ -253,6 +254,7 @@ export enum ContentDataFieldsNameEnum {
   ORG_ID = '组织',
   DEVICE_ID = '设备',
   ATTR = '属性',
+  deviceName = '设备名称',
   VIDEO_ID = '视频流',
   ACCESS_MODE = 'ACCESS_MODE',
   VIDEO_URL = '视频地址',

 import { defineStore } from 'pinia'
-import { toRaw, unref } from 'vue'
+import { toRaw } from 'vue'
 import { store } from '..'
 import type { NodeDataType } from '@/api/node/model'
 import type { ProductAndDevice } from '@/api/content/model'
@@ -7,12 +7,6 @@ import type { CreateComponentType } from '@/core/Library/types'
 import { isShareMode } from '@/utils/env'
 import { ConfigurationAuthEnum, ConfigurationTemplateAuthEnum } from '@/enums/authEnum'
 
-interface DeviceList {
-  deviceId: string
-  name: string
-  codeType: string
-}
-
 interface ContentDataStoreType {
   contentData: NodeDataType[]
   configurationId: Nullable<string>
@@ -20,7 +14,6 @@ interface ContentDataStoreType {
   isTemplate?: number | null | string
   configurationContentList?: any
   configurationContentId: Nullable<string>
-  diveceDetailMap: Record<string, DeviceList>
   hasDesignAuth?: boolean
   hasPerviewAuth?: boolean
   isTemplateLink?: boolean
@@ -35,7 +28,6 @@ export const useContentDataStore = defineStore('app-content-data', {
     productAndDevice: [],
     configurationContentList: [],
     configurationContentId: null,
-    diveceDetailMap: {},
     hasDesignAuth: true,
     hasPerviewAuth: true,
     isTemplateLink: false,
@@ -70,17 +62,9 @@ export const useContentDataStore = defineStore('app-content-data', {
 
     setProductAndDevice(list: ProductAndDevice[]) {
       this.productAndDevice = list
-      this.doBuildDeviceMap()
       return list
     },
 
-    doBuildDeviceMap() {
-      const list = this.productAndDevice.map(item => toRaw(unref(item.deviceList))).flat(1)
-      this.diveceDetailMap = list.reduce((prev, next) => {
-        return { ...prev, [next?.deviceId]: next }
-      }, {} as Record<'string', DeviceList>)
-    },
-
     getCurrentNodeDataById(config: CreateComponentType): Nullable<NodeDataType> {
       const { cellInfo } = config
       const { id } = cellInfo || {}