feat: 新增场景联动-触发规则-功能

src/views/rule-engine/Scene/Save/Device/InvokeFunction.vue

@@ -0,0 +1,106 @@
+<template>
+  <a-row :gutter='24'>
+    <a-col :span='10'>
+      <a-form-item
+        name='functionId'
+        :rules="[{ required: true, message: '请选择功能' }]"
+      >
+        <a-select
+          showSearch
+          allowClear
+          v-model='functionId'
+          style='width: 100%'
+          placeholder='请选择功能'
+          :filterOption='filterSelectNode'
+          @select='onSelect'
+        />
+      </a-form-item>
+    </a-col>
+    <a-col :span='14'>
+      <a-form-item>定时调用所选功能</a-form-item>
+    </a-col>
+    <a-col :span='24'>
+      <a-form-item
+        style='margin-top: 24px'
+        name='functionParameters'
+      >
+        <FunctionCall
+          v-model:value='_value'
+          :data='callDataOptions'
+          @change='callDataChange'
+        />
+      </a-form-item>
+    </a-col>
+  </a-row>
+</template>
+
+<script setup lang='ts' name='InvokeFunction'>
+import { filterSelectNode } from '@/utils/comm'
+import { FunctionCall } from '../components'
+
+type Emit = {
+  (e: 'update:value', data: Record<string, any>): void
+  (e: 'update:action', data: string): void
+}
+
+const props = defineProps({
+  value: {
+    type: Object,
+    default: () => ({})
+  },
+  action: {
+    type: String,
+    default: ''
+  },
+  functions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits<Emit>()
+
+const functionId = ref()
+const _value = ref([])
+
+const callDataOptions = computed(() => {
+  const _valueKeys = Object.keys(props.value)
+  if (_valueKeys.length) {
+    return _valueKeys.map(key => {
+      const item: any = props.functions.find((p: any) => p.id === key)
+      if (item) {
+        return {
+          id: item.id,
+          name: item.name,
+          type: item.valueType ? item.valueType.type : '-',
+          format: item.valueType ? item.valueType.format : undefined,
+          options: item.valueType ? item.valueType.element : undefined,
+          value: props.value[key]
+        }
+      }
+      return {
+        id: key,
+        name: key,
+        type: '',
+        format: undefined,
+        options: undefined,
+        value: props.value[key]
+      }
+    })
+  }
+  return []
+})
+
+const onSelect = (v: string, item: any) => {
+  emit('update:action', `执行${item.name}`)
+}
+
+const callDataChange = () => {
+
+}
+
+</script>
+
+<style scoped>
+
+</style>

src/views/rule-engine/Scene/Save/Device/ReadProperties.vue

@@ -53,7 +53,6 @@ const emit = defineEmits<Emit>()
 const readProperties = ref<string[]>(props.value)
 
 const change = (values: string[], optionItems: any[]) => {
-  console.log(values, optionItems)
   const names = optionItems.map((item) => item.name);
   let extraStr = '';
   let isLimit = false;

src/views/rule-engine/Scene/Save/Device/ReportEvent.vue

@@ -1,66 +0,0 @@
-<template>
-  <a-row :futter='[24]'>
-    <a-col :span='10'>
-      <a-select
-        showSearch
-        max-tag-count='responsive'
-        style='width: 100%'
-        placeholder='placeholder'
-        v-model:value='reportKey'
-        :options='properties'
-        :filter-option='filterSelectNode'
-      />
-    </a-col>
-    <a-col :span='14'>定时调用所选属性</a-col>
-    <a-col :span='24' v-if='showTable'>
-
-    </a-col>
-  </a-row>
-</template>
-
-<script setup lang='ts' name='ReportEvent'>
-import { filterSelectNode } from '@/utils/comm'
-import type { PropType } from 'vue'
-
-type Emit = {
-  (e: 'update:value', data: Array<string>): void
-  (e: 'update:action', data: string): void
-}
-
-const props = defineProps({
-  value: {
-    type: Array as PropType<Array<string>>,
-    default: () => []
-  },
-  action: {
-    type: String,
-    default: ''
-  },
-  properties: {
-    type: Array,
-    default: () => []
-  }
-})
-
-const emit = defineEmits<Emit>()
-
-const reportKey = ref<Array<string>>([])
-const callData = ref<Array<{}>>()
-
-const showTable = computed(() => {
-  return !!reportKey.value
-})
-
-watch([props.value, props.properties], () => {
-  if (props.value && props.properties?.length) {
-
-  } else {
-
-  }
-}, { immediate: true })
-
-</script>
-
-<style scoped>
-
-</style>

src/views/rule-engine/Scene/Save/Device/Type.vue

@@ -20,19 +20,32 @@
       >
         <WriteProperty v-model:value='formModel.writeProperties' v-model:action='optionCache.action' :properties='writeProperties' />
       </a-form-item>
+      <a-form-item
+        v-if='showReportEvent'
+        name='eventId'
+        :rules="[{ required: true, message: '请选择事件' }]"
+      >
+        <a-select
+          v-model:value='formModel.eventId'
+          :filter-option='filterSelectNode'
+          :options='eventOptions'
+          placeholder='请选择事件'
+          style='width: 100%'
+          @select='eventSelect'
+        />
+      </a-form-item>
     </a-form>
   </div>
 </template>
 
 <script setup lang='ts'>
-
+import { filterSelectNode } from '@/utils/comm'
 import { TopCard, Timer } from '@/views/rule-engine/Scene/Save/components'
 import { getImage } from '@/utils/comm'
 import { metadataType } from '@/views/rule-engine/Scene/typings'
 import type { PropType } from 'vue'
 import { TypeEnum } from '@/views/rule-engine/Scene/Save/Device/util'
 import ReadProperties from './ReadProperties.vue'
-import ReportEvent from './ReportEvent.vue'
 import WriteProperty from './WriteProperty.vue'
 
 const props = defineProps({
@@ -46,7 +59,10 @@ const formModel = reactive({
   operator: 'online',
   timer: {},
   readProperties: [],
-  writeProperties: {}
+  writeProperties: {},
+  eventId: undefined,
+  functionId: undefined,
+  functionParameters: []
 })
 
 const optionCache = reactive({
@@ -55,6 +71,7 @@ const optionCache = reactive({
 
 const readProperties = ref<any[]>([])
 const writeProperties = ref<any[]>([])
+const eventOptions = ref<any[]>([])
 
 const topOptions = computed(() => {
   const baseOptions = [
@@ -72,6 +89,7 @@ const topOptions = computed(() => {
 
   if (props.metadata.events?.length) {
     baseOptions.push(TypeEnum.reportEvent)
+    eventOptions.value = props.metadata.events.map(item => ({ ...item, label: item.name, value: item.id }))
   }
 
   if (props.metadata.properties?.length) {
@@ -125,6 +143,10 @@ const showTimer = computed(() => {
   ].includes(formModel.operator)
 })
 
+const eventSelect = (_: string, eventItem: any) => {
+  optionCache.action = `${eventItem.name}上报`
+}
+
 </script>
 
 <style scoped lang='less'>

src/views/rule-engine/Scene/Save/Device/WriteProperty.vue

@@ -17,13 +17,20 @@
       </span>
     </a-col>
     <a-col :span='24' v-if='showTable'>
-
+      <div style='margin-top: 24px'>
+        <FunctionCall
+          :value='_value'
+          :data='callDataOptions'
+          @change='callDataChange'
+        />
+      </div>
     </a-col>
   </a-row>
 </template>
 
 <script setup lang='ts' name='WriteProperties'>
 import { filterSelectNode } from '@/utils/comm'
+import { FunctionCall } from '../components'
 import type { PropType } from 'vue'
 
 type Emit = {
@@ -49,7 +56,8 @@ const props = defineProps({
 const emit = defineEmits<Emit>()
 
 const reportKey = ref<string>()
-const callData = ref<Array<Record<string, any>>>()
+const callData = ref<Array<{ id: string, value: string | undefined }>>()
+const _value = ref([])
 
 const callDataOptions = computed(() => {
   const _valueKeys = Object.keys(props.value)
@@ -88,8 +96,22 @@ const change = (v: string, option: any) => {
   const _data = {
     [v]: undefined
   }
-  callData.value = [_data]
+  callData.value = [{ id: v, value: undefined }]
   emit('update:value', _data)
+  emit('update:action', `修改${option.name}`)
+}
+
+const callDataChange = (v: any[]) => {
+  emit('update:value', {
+    [reportKey.value!]: v[0]?.value
+  })
+}
+
+const initRowKey = () => {
+  if (props.value.length) {
+    const keys = Object.keys(props.value)
+    reportKey.value = keys[0]
+  }
 }
 
 </script>

src/views/rule-engine/Scene/Save/components/FunctionCall/FunctionCall.vue

@@ -1,19 +1,72 @@
 <template>
   <a-table
-    :data-source='dataSource'
+    :data-source='dataSource.value'
     :columns='columns'
   >
     <template #bodyCell="{ column, record, index }">
-      <template v-if='column.key'>
+      <template v-if='column.dataIndex === "name"'>
+        {{ record.name }}
+      </template>
+      <template v-if='column.dataIndex === "type"'>
+        {{ record.type }}
+        <a-tooltip
+          v-if="record.type === 'object'"
+        >
+          <template slot="title">
+            请按照json格式输入
+          </template>
 
+          <AIcon
+            type="QuestionCircleOutlined"
+            :style="{
+               marginLeft: '5px',
+               cursor: 'help',
+            }"
+          />
+        </a-tooltip>
+      </template>
+      <template v-if='column.dataIndex === "value"'>
+        <ValueItem
+          v-model:modelValue='record.value'
+          :itemType="record.type"
+          :options="handleOptions(record)"
+        />
       </template>
     </template>
   </a-table>
 </template>
 
 <script setup lang='ts' name='FunctionCall'>
+import type { PropType } from 'vue'
 
-const dataSource = []
+type Emit = {
+  (e: 'change', data: Array<{ name: string, value: any}>): void
+  (e: 'update:value', data: Array<{ name: string, value: any}>): void
+}
+
+const emit = defineEmits<Emit>()
+
+const props = defineProps({
+  value: {
+    type: Array as PropType<Array<{ label: string, value: any}>>,
+    default: () => []
+  },
+  data: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const dataSource = reactive<{value: any[]}>({
+  value: []
+})
+
+watch(() => props.data, () => {
+  dataSource.value = props.data.map((item: any) => {
+    const oldValue = props.value.find((oldItem: any) => oldItem.name === item.id)
+    return oldValue ? { ...item, value: oldValue.value } : item
+  })
+}, { immediate: true })
 
 const columns = [
   {
@@ -21,8 +74,8 @@ const columns = [
     dataIndex: 'name'
   },
   {
-    title: '参数名称',
-    dataIndex: 'name'
+    title: '类型',
+    dataIndex: 'type'
   },
   {
     title: '值',
@@ -31,6 +84,29 @@ const columns = [
     width: 260
   },
 ]
+
+const handleOptions = (record: any) => {
+  switch(record.type) {
+    case 'enum':
+      return (record?.options?.elements || []).map((item: any) => ({ label: item.text, value: item.value }))
+    case 'boolean':
+      return [
+        { label: '是', value: true },
+        { label: '否', value: false },
+      ]
+    default:
+      return undefined
+  }
+}
+
+watch(() => dataSource.value, () => {
+  const _value = dataSource.value.map(item => ({
+    name: item.id, value: item.value
+  }))
+  emit('change', _value)
+  emit('update:value', _value)
+}, { deep: true })
+
 </script>
 
 <style scoped>

src/views/rule-engine/Scene/Save/components/FunctionCall/index.ts

@@ -0,0 +1 @@
+export { default as FunctionCall } from './FunctionCall.vue'

src/views/rule-engine/Scene/Save/components/index.ts

@@ -1,3 +1,4 @@
 export { default as Timer } from './Timer'
 export { default as TopCard } from './TopCard.vue'
-export { default as TriggerWay } from './TriggerWay.vue'
+export { default as TriggerWay } from './TriggerWay.vue'
+export { default as FunctionCall } from './FunctionCall/FunctionCall.vue'