Merge branch 'perf/event-template' into 'main_dev'

perf: 优化事件在模版模式中无法选择产品 See merge request yunteng/thingskit-scada!181

Merge branch 'perf/event-template' into 'main_dev'
perf: 优化事件在模版模式中无法选择产品 See merge request yunteng/thingskit-scada!181
xp.Huang
2 parents c78fb78e 358bd696
Showing 6 changed files with 108 additions and 46 deletions
src/api/node/model/index.ts
src/core/Library/components/PublicForm/components/DataEvents/MouseDownOrUpSetting/config.ts
src/core/Library/components/PublicForm/components/DataEvents/MouseDownOrUpSetting/index.vue
src/core/Library/packages/Basic/VariableImage/index.vue
src/core/websocket/processor/dataDynamicEffectHandler.ts
src/hooks/business/useNodeUtils.ts
--- a/src/api/node/model/index.ts
View file @2d4c51e
+++ b/src/api/node/model/index.ts
View file @2d4c51e
@@ -111,6 +111,7 @@ export interface NodeDataDataSourceJsonType {
 export interface DeviceCommandListItemType {
   deviceId: string
   way: CommandWayEnum
+  deviceProfileId: string
   command: string | Recordable
 }
@@ -142,12 +143,17 @@ export interface DoubleClickEventDataType {
 export interface SingleClickEventDataType extends DoubleClickEventDataType { }
+export interface OperationPasswordDataType {
+  checked: boolean
+  pawssword?: string
+}
+
 export interface NodeDataEventJsonType {
   [EventTypeEnum.DOUBLE]: DoubleClickEventDataType
   [EventTypeEnum.SINGLE]: SingleClickEventDataType
   [EventTypeEnum.DOWN]: MouseDownEventDataType
   [EventTypeEnum.UP]: MouseUpEventDataType
-  [EventTypeEnum.OPERATION_PASSWORD]: { password: string } | any
+  [EventTypeEnum.OPERATION_PASSWORD]: OperationPasswordDataType
 }
 export interface RangeItemType {
--- a/src/core/Library/components/PublicForm/components/DataEvents/MouseDownOrUpSetting/config.ts
View file @2d4c51e
+++ b/src/core/Library/components/PublicForm/components/DataEvents/MouseDownOrUpSetting/config.ts
View file @2d4c51e
@@ -9,6 +9,7 @@ export enum TableColumnFieldEnum {
   DEVICE_ID = 'deviceId',
   WAY = 'way',
   COMMAND = 'command',
+  DEVICE_PROFILE_ID = 'deviceProfileId',
 }
 export interface TableRecordItemType {
@@ -18,6 +19,7 @@ export interface TableRecordItemType {
   [TableColumnFieldEnum.COMMAND]?: Nullable<string | Recordable>
   [ContentDataFieldsEnum.DEVICE_TYPE]?: Nullable<DeviceTypeEnum>
   [ContentDataFieldsEnum.CODE_TYPE]?: Nullable<CodeTypeEnum>
+  [ContentDataFieldsEnum.DEVICE_PROFILE_ID]: Nullable<string>
   [ContentDataFieldsEnum.TRANSPORT_TYPE]?: Nullable<TransportTypeEnum>
 }
@@ -65,28 +67,38 @@ export const getFormSchemas = (event: EventTypeEnum): FormSchema[] => {
   ]
 }
-export const tableColumns: BasicColumn[] = [
-  {
-    title: '设备',
-    width: 200,
-    key: TableColumnFieldEnum.DEVICE_ID,
-    dataIndex: TableColumnFieldEnum.DEVICE_ID,
-  },
-  {
-    title: '单向/双向',
-    width: 200,
-    key: TableColumnFieldEnum.WAY,
-    dataIndex: TableColumnFieldEnum.WAY,
-  },
-  {
-    title: '下发值',
-    key: TableColumnFieldEnum.COMMAND,
-    dataIndex: TableColumnFieldEnum.COMMAND,
-    editComponent: 'JSONEditor',
-    helpMessage: ['点击进行命令编辑'],
-  },
-  {
-    title: '操作',
-    key: 'action',
-  },
-]
+export const getTableColumns = (isTemplateMode: boolean): BasicColumn[] => {
+  return [
+    {
+      title: '产品',
+      width: 200,
+      ifShow: isTemplateMode,
+      key: TableColumnFieldEnum.DEVICE_PROFILE_ID,
+      dataIndex: TableColumnFieldEnum.DEVICE_PROFILE_ID,
+    },
+    {
+      title: '设备',
+      width: 200,
+      ifShow: !isTemplateMode,
+      key: TableColumnFieldEnum.DEVICE_ID,
+      dataIndex: TableColumnFieldEnum.DEVICE_ID,
+    },
+    {
+      title: '单向/双向',
+      width: 200,
+      key: TableColumnFieldEnum.WAY,
+      dataIndex: TableColumnFieldEnum.WAY,
+    },
+    {
+      title: '下发值',
+      key: TableColumnFieldEnum.COMMAND,
+      dataIndex: TableColumnFieldEnum.COMMAND,
+      editComponent: 'JSONEditor',
+      helpMessage: ['点击进行命令编辑'],
+    },
+    {
+      title: '操作',
+      key: 'action',
+    },
+  ]
+}
--- a/src/core/Library/components/PublicForm/components/DataEvents/MouseDownOrUpSetting/index.vue
View file @2d4c51e
+++ b/src/core/Library/components/PublicForm/components/DataEvents/MouseDownOrUpSetting/index.vue
View file @2d4c51e
 <script setup lang="ts">
 import { Button, Empty, FormItem, RadioGroup, Select, Tooltip } from 'ant-design-vue'
-import { onMounted, ref, unref } from 'vue'
+import { onMounted, ref, toRaw, unref } from 'vue'
 import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select'
 import type { ComponentExposeType } from '../../..'
 import type { TableRecordItemType } from './config'
-import { TableColumnFieldEnum, getFormSchemas, tableColumns } from './config'
+import { TableColumnFieldEnum, getFormSchemas, getTableColumns } from './config'
 import CommandEditor from './CommandEditor.vue'
 import { FormLayoutEnum } from '@/components/Form/src/enum'
 import { BasicForm, useForm } from '@/components/Form'
@@ -18,6 +18,7 @@ import type { DeviceItemType } from '@/api/device/model'
 import { useContentDataStore } from '@/store/modules/contentData'
 import { useJsonParse } from '@/hooks/business/useJSONParse'
 import type { DeviceCommandListItemType, MouseDownEventDataType } from '@/api/node/model'
+import type { ProductAndDevice } from '@/api/content/model'
 const props = defineProps<{ event: EventTypeEnum }>()
@@ -37,8 +38,10 @@ const dataSource = ref<TableRecordItemType[]>([getInitTableRecord()])
 const deviceList = ref<DeviceItemType[]>([])
+const productList = ref<ProductAndDevice[]>([])
+
 const [registerTable] = useTable({
-  columns: tableColumns,
+  columns: getTableColumns(!!unref(contentDataStore.getIsTemplate)),
   showIndexColumn: false,
   pagination: false,
   canResize: true,
@@ -53,6 +56,7 @@ function getInitTableRecord(): TableRecordItemType {
     deviceId: null,
     way: CommandWayEnum.ONE_WAY,
     command: null,
+    deviceProfileId: null,
   }
 }
@@ -65,6 +69,7 @@ const handleDeleteRow = (data: TableRecordItemType) => {
 }
 async function getDeviceList() {
+  if (unref(contentDataStore.getIsTemplate)) return
   const organizationId = window.useParseParams().organizationId
   if (!organizationId) return
   const productIds = unref(contentDataStore.getProductIds)
@@ -76,9 +81,19 @@ async function getDeviceList() {
   }))
 }
+async function getDeviceProfileList() {
+  if (!unref(contentDataStore.getIsTemplate)) return
+  productList.value = toRaw(unref(contentDataStore.getProductAndDevice)) || []
+}
+
 const handleSelectDevice = (_value: SelectValue, option: DefaultOptionType | DefaultOptionType[], record: TableRecordItemType) => {
-  const { codeType, transportType } = option as DeviceItemType
-  Object.assign(record, { codeType, transportType } as TableRecordItemType)
+  const { transportType } = option as DeviceItemType
+  Object.assign(record, { transportType } as TableRecordItemType)
+}
+
+const handleSelectProduct = (_value: SelectValue, option: DefaultOptionType | DefaultOptionType[], record: TableRecordItemType) => {
+  const { transportType } = option as ProductAndDevice
+  Object.assign(record, { transportType })
 }
 const handleOpenJSONEditorModal = (record: TableRecordItemType) => {
@@ -93,11 +108,12 @@ const handleEditComplete = (record: TableRecordItemType, command: string | Recor
 const getFieldsValue = (): MouseDownEventDataType => {
   const commandList = unref(dataSource).map((item) => {
-    const { deviceId, command, way } = item
+    const { deviceId, command, way, deviceProfileId } = item
     return {
       deviceId,
       way,
       command,
+      deviceProfileId,
     } as DeviceCommandListItemType
   })
@@ -108,7 +124,9 @@ const getFieldsValue = (): MouseDownEventDataType => {
 const setFieldsValue = (record: MouseDownEventDataType) => {
   const { commandList = [] } = record || {}
-  dataSource.value = commandList ? commandList.map(item => ({ ...item, uuid: buildUUID() })) : [getInitTableRecord()]
+  dataSource.value = commandList
+    ? commandList.map(item => ({ ...item, uuid: buildUUID() }))
+    : [getInitTableRecord()]
 }
 const validate = async () => {
@@ -116,8 +134,8 @@ const validate = async () => {
   await fromActionType.validate()
   let passFlag = true
   for (const item of unref(dataSource)) {
-    const { deviceId } = item
-    if (deviceId) continue
+    const { deviceId, deviceProfileId } = item
+    if (deviceId || deviceProfileId) continue
     passFlag = false
   }
   return passFlag ? Promise.resolve(getFieldsValue()) : Promise.reject(new Error('请输入'))
@@ -130,6 +148,7 @@ const getValidateStatus = (value: string | number) => {
 onMounted(() => {
   getDeviceList()
+  getDeviceProfileList()
 })
 defineExpose<ComponentExposeType>({
@@ -142,11 +161,26 @@ defineExpose<ComponentExposeType>({
 <template>
   <section>
     <BasicForm @register="registerForm" />
-    <section class="w-full h-24">
+    <section class="w-full ">
       <BasicTable @register="registerTable">
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === TableColumnFieldEnum.DEVICE_PROFILE_ID">
+            <FormItem
+              name="record[TableColumnFieldEnum.DEVICE_PROFILE_ID]"
+              :validate-status="getValidateStatus(record[TableColumnFieldEnum.DEVICE_PROFILE_ID])"
+            >
+              <Select
+                v-model:value="record[TableColumnFieldEnum.DEVICE_PROFILE_ID]" :options="productList" :field-names="{ label: 'name', value: 'profileId' }" placeholder="请选择产品"
+                class="w-full"
+                @change="(value, option) => handleSelectProduct(value, option, record as TableRecordItemType)"
+              />
+            </FormItem>
+          </template>
           <template v-if="column.key === TableColumnFieldEnum.DEVICE_ID">
-            <FormItem name="record[TableColumnFieldEnum.DEVICE_ID]" :validate-status="getValidateStatus(record[TableColumnFieldEnum.DEVICE_ID])">
+            <FormItem
+              name="record[TableColumnFieldEnum.DEVICE_ID]"
+              :validate-status="getValidateStatus(record[TableColumnFieldEnum.DEVICE_ID])"
+            >
               <Select
                 v-model:value="record[TableColumnFieldEnum.DEVICE_ID]" :options="deviceList" placeholder="请选择设备"
                 class="w-full"
@@ -204,7 +238,9 @@ defineExpose<ComponentExposeType>({
 </template>
 <style lang="less" scoped>
-  :deep(.ant-table-cell>.css-dev-only-do-not-override-eq3tly){
-    margin:0 !important
+:deep(.ant-table-cell>) {
+  .ant-form-item {
+    margin: 0 !important
   }
+}
 </style>
--- a/src/core/Library/packages/Basic/VariableImage/index.vue
View file @2d4c51e
+++ b/src/core/Library/packages/Basic/VariableImage/index.vue
View file @2d4c51e
@@ -20,8 +20,10 @@ const onReceiveActMessage = (commandSource: CommandSource, message: Subscription
   const nodeUtils = new NodeUtils()
   const cell = nodeUtils.getCellById(node)
   if (!cell) return
-  const { attr, rangeList, defaultImage } = data as VariableImageActDataType
-  const { latestValue } = useLatestMessageValue(message.data, attr)
+  const { attr, enable, rangeList, defaultImage } = data as VariableImageActDataType
+  if (!enable) return
+
+  const { latestValue } = useLatestMessageValue(message.data, attr!)
   const { flag, record } = getMeetTheConditionsRange(rangeList, latestValue)
   let imageSrc
   if (flag) {
--- a/src/core/websocket/processor/dataDynamicEffectHandler.ts
View file @2d4c51e
+++ b/src/core/websocket/processor/dataDynamicEffectHandler.ts
View file @2d4c51e
@@ -57,7 +57,8 @@ export class DataDynamicEffectHandler {
     const { node, data } = commandSource
     const cell = this.nodeUtils.getCellById(node)
     if (!cell) return
-    const { attr } = data as FlashActDataType
+    const { attr, enable } = data as FlashActDataType
+    if (!enable) return
     const { latestValue } = useLatestMessageValue(message.data, attr!)
     const { flag } = getMeetTheConditionsRange((data as FlashActDataType).rangeList, latestValue)
@@ -76,7 +77,8 @@ export class DataDynamicEffectHandler {
     const { node, data } = commandSource
     const cell = this.nodeUtils.getCellById(node)
     if (!cell) return
-    const { attr } = data as DisplayActDataType
+    const { attr, enable } = data as DisplayActDataType
+    if (!enable) return
     const { latestValue } = useLatestMessageValue(message.data, attr!)
     const { flag, record } = getMeetTheConditionsRange((data as DisplayActDataType).rangeList, latestValue)
     if (flag) {
@@ -101,7 +103,8 @@ export class DataDynamicEffectHandler {
     const { node, data } = commandSource
     const cell = this.nodeUtils.getCellById(node)
     if (!cell) return
-    const { attr } = data as RotateActDataType
+    const { attr, enable } = data as RotateActDataType
+    if (!enable) return
     const { latestValue } = useLatestMessageValue(message.data, attr!)
     const { flag } = getMeetTheConditionsRange((data as RotateActDataType).rangeList, latestValue)
     const nodeEl = this.nodeUtils.getNodesForCells<SVGAElement>([cell])
@@ -124,7 +127,8 @@ export class DataDynamicEffectHandler {
     const { node, data } = commandSource
     const cell = this.nodeUtils.getCellById(node)
     if (!cell) return
-    const { attr } = data as DynamicActDataType
+    const { attr, enable } = data as DynamicActDataType
+    if (!enable) return
     const { latestValue } = useLatestMessageValue(message.data, attr!)
     const { flag, record } = getMeetTheConditionsRange((data as DynamicActDataType).rangeList, latestValue)
     const nodeEl = this.nodeUtils.getNodeForCell<SVGAElement>(cell)
--- a/src/hooks/business/useNodeUtils.ts
View file @2d4c51e
+++ b/src/hooks/business/useNodeUtils.ts
View file @2d4c51e
@@ -2,8 +2,10 @@ import { isString } from 'lodash-es'
 import type { PackageCategoryEnum } from '@/core/Library/enum'
 import type { DrawApp, MxCell } from '@/fitCore/types'
 import type { BasicComponentEnum } from '@/core/Library/packages/Basic'
+import type { ControlComponentEnum } from '@/core/Library/packages/Control'
+import type { ChartComponentEnum } from '@/core/Library/packages/Chart'
-type ComponentKey = BasicComponentEnum
+type ComponentKey = BasicComponentEnum | ControlComponentEnum | ChartComponentEnum
 export class NodeUtils {
   App: DrawApp