Merge branch 'perf/main_dev' of http://git.yunteng.com/yunteng/thingskit-scada into fix/zfl

@@ -16,7 +16,7 @@ enum Api {
   RPC_ONEWAY = '/rpc/oneway',
 
   GEN_MODBUS_COMMAND = '/js/modbus',
-  GET_DEVICE = '/device/', // 获取设备详情
+  GET_DEVICE_DETAIL = '/device/', // 获取设备详情
 }
 
 export interface GenModbusCommandType {
@@ -125,7 +125,7 @@ export const getDeviceActiveTime = (entityId: string) => {
 export const getDeviceInfo = (deviceId: string) => {
   return defHttp.get(
     {
-      url: `${Api.GET_DEVICE}${deviceId}`,
+      url: `${Api.GET_DEVICE_DETAIL}${deviceId}`,
     },
   )
 }

-import type { ThingsModel } from '@/api/device/model'
+import type { ThingsModelItemType } from '@/api/device/model'
 import type { ImageSelectorDataType } from '@/core/Library/components/ImageSelector'
 import type { CommandWayEnum } from '@/enums/commandEnum'
 import type { ActTypeEnum, AggregateTypeEnum, CommandDeliveryWayEnum, DeviceTypeEnum, EventActionTypeEnum, EventTypeEnum, SocketSubscriberEnum, TransportTypeEnum } from '@/enums/datasource'
@@ -79,11 +79,20 @@ export interface AlarmListOptionType {
 
 }
 
+export interface DeviceInfoType {
+  code?: string
+  transportType?: string
+  deviceType?: string
+  deviceProfileId?: string
+  deviceName?: string
+  codeType?: string
+}
+
 export interface NodeDataDataSourceJsonType {
   deviceId: string
   deviceProfileId: string
   attr: string
-  attrInfo: ThingsModel
+  attrInfo: ThingsModelItemType
 
   deviceType?: DeviceTypeEnum
   transportType?: TransportTypeEnum
@@ -92,13 +101,7 @@ export interface NodeDataDataSourceJsonType {
   chartOption?: ChartOptionType
   videoOption?: VideoOptionType
   alarmListOption?: AlarmListOptionType
-  deviceInfo?: {
-    code?: string
-    transportType?: string
-    deviceType?: string
-    deviceProfileId?: string
-    label?: string
-  }
+  deviceInfo?: DeviceInfoType
   circularFlowMeterOption?: FlowMeterColorItemType[] // 圆形水球图数据暂定any
   rectFlowMeterOption?: FlowMeterColorItemType[] // 方形水球图颜色配置数据暂定any
 
@@ -126,7 +129,7 @@ export interface DoubleClickEventDataType {
   serviceCommand?: Recordable
   way?: CommandWayEnum
   customCommand?: string
-  deviceInfo?: any
+  deviceInfo?: DeviceInfoType
   commandWay?: CommandDeliveryWayEnum
   callType?: string
   operationPassword?: {
@@ -161,7 +164,7 @@ export interface BasicActDataType {
   attr: string
   enable?: boolean
   deviceProfileId?: string | number
-  attrInfo?: ThingsModel
+  attrInfo?: ThingsModelItemType
 }
 
 export interface FlashActDataType extends BasicActDataType {

 <script lang="ts" setup>
 import { computed, ref, unref, watch, watchEffect } from 'vue'
 import { Select } from 'ant-design-vue'
-import { isFunction, isString } from '@wry-smile/utils-is'
+import { isFunction } from '@wry-smile/utils-is'
 import { get } from 'lodash-es'
-import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select'
+import type { DefaultOptionType, SelectProps, SelectValue } from 'ant-design-vue/es/select'
 import { Icon } from '@iconify/vue'
 import { useRuleFormItem } from '@/hooks/component/useFormItem'
 
@@ -18,21 +18,20 @@ const props = withDefaults(
     api?: ((arg?: any) => Promise<DefaultOptionType[]>) | null
     params?: any
     resultField?: string
-    labelField?: string | string[]
-    valueField?: string
+    aliasField?: string
     immediate?: boolean
     alwaysLoad?: boolean
     options?: DefaultOptionType[]
+    fieldNames?: SelectProps['fieldNames']
   }>(),
   {
     api: null,
     params: () => ({}),
     resultFiled: '',
-    labelField: 'label',
-    valueFiled: 'value',
     immediate: true,
     alwaysLoad: false,
     options: () => ([]),
+    fieldNames: () => ({ label: 'label', value: 'value', options: 'options' }),
   },
 )
 
@@ -47,39 +46,29 @@ const emitData = ref<any[]>([])
 const [state] = useRuleFormItem(props, 'value', 'change', emitData)
 
 const getOptions = computed(() => {
-  const { labelField: _labelField = 'label', valueField = 'value', numberToString } = props
+  const { numberToString, fieldNames } = props
+  const { value: valueField = 'value' } = fieldNames
 
   const data = unref(optionsRef).reduce((prev, next: any) => {
     if (next) {
       const value = get(next, valueField)
-      const { label } = getAliasLabelInfo(next, _labelField)
+
       prev.push({
-        // ...omit(next, [labelField, valueField]),
         ...next,
-        label,
-        value: numberToString ? `${value}` : value,
-      })
+        [valueField]: numberToString ? `${value}` : value,
+      } as DefaultOptionType)
     }
     return prev
   }, [] as DefaultOptionType[])
+
   return data.length > 0 ? data : props.options
 })
 
-function getAliasLabelInfo(data: any, labelField: string | string[]) {
-  labelField = isString(labelField) ? [labelField] : labelField
-
-  let value
-  let labelKey = labelField[0]
-  for (const label of labelField) {
-    value = get(data, label)
-    if (value) {
-      labelKey = label
-      break
-    }
-  }
-
-  return { labelField: labelKey, label: value }
-}
+const getFieldNames = computed<SelectProps['fieldNames']>(() => {
+  const { fieldNames, aliasField } = props
+  const { label, value, options } = fieldNames
+  return { label: aliasField || label, value, options }
+})
 
 watchEffect(() => {
   props.immediate && !props.alwaysLoad && fetch()
@@ -149,7 +138,11 @@ function handleChange(value: SelectValue, ...args: any[]) {
 
 <template>
   <Select
-    v-bind="$attrs" v-model:value="state" :options="getOptions" @dropdown-visible-change="handleFetch"
+    v-bind="$attrs"
+    v-model:value="state"
+    :options="getOptions"
+    :field-names="getFieldNames"
+    @dropdown-visible-change="handleFetch"
     @change="handleChange"
   >
     <template v-for="item in (Object.keys($slots as Slots) as SlotName[])" #[item]="data">

@@ -181,8 +181,7 @@ export const getFormSchemas = (event: EventTypeEnum): FormSchema[] => {
         return {
           api: getThingsModelServices,
           params: deviceProfileId,
-          labelField: 'functionName',
-          valueField: 'identifier',
+          fieldNames: { label: 'functionName', value: 'identifier' },
           onSelect(value: string, options: ThingsModel) {
             formModel[FormFieldsEnum.THINGS_MODEL] = value ? options : null
             formModel.callType = options.callType

@@ -3,9 +3,10 @@ import { getDeviceAttributes, 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 } from '@/enums/datasource'
+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'
 
 const contentDataStore = useContentDataStoreWithOut()
 export const formSchemas = (componentKey?: string): FormSchema[] => {
@@ -51,15 +52,15 @@ export const formSchemas = (componentKey?: string): FormSchema[] => {
             deviceProfileIds: (unref(contentDataStore.getProductAndDevice) || []).map((item: ProductAndDevice) => item?.profileId),
             organizationId,
           },
-          labelField: ['alias', 'name'],
-          valueField: 'tbDeviceId',
+          aliasField: 'alias',
+          fieldNames: { label: 'name', value: 'tbDeviceId' },
           onSelect(value: string, option: DeviceItemType) {
             formModel[ContentDataFieldsEnum.DEVICE_PROFILE_ID] = value ? option.deviceProfileId : null
-            formModel[ContentDataFieldsEnum.DEVICE_INFO] = value && option ? { code: option.code, transportType: option.transportType, deviceType: option.deviceType, deviceProfileId: option.deviceProfileId, label: option.alias || option.name } : null
+            formModel[ContentDataFieldsEnum.DEVICE_INFO] = value && option ? { code: option.code, transportType: option.transportType, deviceType: option.deviceType, deviceProfileId: option.deviceProfileId, deviceName: option.alias || option.name } : null
             formModel[ContentDataFieldsEnum.ATTR] = null
           },
-          filterOption: (inputValue: string, option: Record<'label' | 'value', string>) =>
-            option.label.includes(inputValue),
+          filterOption: (inputValue: string, option: DeviceItemType) =>
+            option.alias?.includes?.(inputValue) || option.name?.includes?.(inputValue),
         }
       },
     },
@@ -75,21 +76,20 @@ export const formSchemas = (componentKey?: string): FormSchema[] => {
           api: async (params: string) => {
             if (!deviceProfileId) return []
             const options = await getDeviceAttributes(params)
-            if (componentKey === 'Switch') { // 开关只返回bool
+            if (componentKey === ControlComponentEnum.SWITCH) { // 开关只返回bool
               return options.filter((item) => {
-                return item.detail.dataType.type === 'BOOL'
+                return item.detail.dataType.type === DataTypeEnum.BOOL
               })
             }
             return options
           },
           params: deviceProfileId,
-          labelField: 'name',
-          valueField: 'identifier',
+          fieldNames: { label: 'name', value: 'identifier' },
           onSelect(value: string, option: ThingsModelItemType) {
             formModel[ContentDataFieldsEnum.ATTR_INFO] = value && option ? toRaw(unref(option)) : null
           },
-          filterOption: (inputValue: string, option: Record<'label' | 'value', string>) =>
-            option.label.includes(inputValue),
+          filterOption: (inputValue: string, option: ThingsModelItemType) =>
+            option.name.includes(inputValue),
         }
       },
     },

@@ -121,14 +121,14 @@ export const formSchemas: FormSchema[] = [
           deviceProfileIds: unref(contentDataStore.getProductIds),
           organizationId,
         },
-        labelField: ['alias', 'name'],
-        valueField: 'id',
+        aliasField: 'alias',
+        fieldNames: { label: 'name', value: 'id' },
         maxTagCount: 4,
         onSelect(value: string, option: DeviceItemType) {
           formModel[AlarmListFieldsEnum.DEVICE_PROFILE_ID] = value ? option.deviceProfileId : null
         },
-        filterOption: (inputValue: string, option: Record<'label' | 'value', string>) =>
-          option.label.includes(inputValue),
+        filterOption: (inputValue: string, option: DeviceItemType) =>
+          option.alias?.includes?.(inputValue) || option.name?.includes?.(inputValue),
       }
     },
   },

 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' } },

@@ -3,6 +3,7 @@ import { isLightboxMode } from '@/utils/env'
 
 export const getDefaultOption = (): EChartsOption => {
   return {
+    legend: [],
     xAxis: {
       type: 'category',
       data: isLightboxMode() ? [] : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

@@ -10,6 +10,7 @@ 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'
 
 const props = defineProps<{
   config: CreateComponentType
@@ -49,7 +50,10 @@ function sliceData(data: any[], maxLength = 20) {
   return data
 }
 
-const handlerTimeSeriesData = (message: SubscriptionData, attr: string) => {
+const handlerTimeSeriesData = (commandSource: CommandSource, message: SubscriptionData, attr: 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 xAxisData = ((option.xAxis as XAXisComponentOption[])?.[0] as { data: string[] }).data
@@ -57,6 +61,9 @@ const handlerTimeSeriesData = (message: SubscriptionData, attr: string) => {
   xAxisData.push(formatToDateTime(ts))
   seriesData.push(latestValue)
   unref(chartInstance)?.setOption({
+    title: {
+      text: `${deviceName}-${attrInfo.name}`,
+    },
     xAxis: { data: sliceData(xAxisData) },
     series: { data: sliceData(seriesData) },
   } as EChartsOption)
@@ -69,7 +76,7 @@ const { onMessage } = useOnMessage({
     const { queryType } = chartOption || {}
 
     if (queryType === SocketSubscriberEnum.TS_SUB_CMDS)
-      handlerTimeSeriesData(message.data, attr)
+      handlerTimeSeriesData(commandSource, message.data, attr)
     else if (queryType === SocketSubscriberEnum.HISTORY_CMDS)
       handleHistoryData(message.data, attr)
   },

+export enum ControlComponentEnum {
+  SWITCH = 'Switch',
+  PARAMETER_SETTINGS = 'ParameterSettings',
+}
+
+export enum ControlComponentNameEnum {
+  SWITCH = '开关',
+  PARAMETER_SETTINGS = '参数设置',
+}