0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 更新场景联动ParamsDropdown中的属性

This commit is contained in:
xieyonghong 2023-03-15 15:11:11 +08:00
parent 2f964837b9
commit a28f46e01c
9 changed files with 85 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/views/rule-engine/Scene/Save/action/index.vue
View File

@ -4,7 +4,7 @@
<span>执行</span>
<ShakeLimit
v-if="props.openShakeLimit"
v-model:value="shakeLimit"
v-model:value="FormModel.branches[name].shakeLimit"
/>
</div>
<div class="actions-warp">
@ -21,7 +21,7 @@
<div class="actions-list">
<List
type="serial"
:branchesName="props.name"
:branchesName="name"
:parallel="false"
:actions="
serialArray.length ? serialArray[0].actions : []
@ -43,7 +43,7 @@
<div class="actions-list">
<List
type="parallel"
:branchesName="props.name"
:branchesName="name"
:parallel="true"
:actions="
parallelArray.length
@ -63,30 +63,32 @@
<script lang="ts" setup>
import ShakeLimit from '../components/ShakeLimit/index.vue';
import { List } from './ListItem';
import { BranchesThen } from '../../typings';
import { BranchesThen } from '../../typings'
import { PropType } from 'vue';
import { randomString } from '@/utils/utils';
import { storeToRefs } from 'pinia';
import { useSceneStore } from 'store/scene'
interface ActionsProps {
name: number;
openShakeLimit?: boolean;
thenOptions: BranchesThen[];
}
const sceneStore = useSceneStore()
const { data: FormModel } = storeToRefs(sceneStore)
const props = defineProps({
name: Number,
name: {
type: Number,
default: 0
},
thenOptions: {
type: Array as PropType<ActionsProps['thenOptions']>,
type: Array as PropType<BranchesThen[]>,
default: () => [],
},
openShakeLimit: Boolean,
openShakeLimit: {
type: Boolean,
default: false
},
});
const emit = defineEmits(['update', 'add']);
const shakeLimit = ref({
enabled: false,
});
const activeKeys = ref<string[]>(['1']);
const parallelArray = ref<BranchesThen[]>([]);
const serialArray = ref<BranchesThen[]>([]);
@ -110,8 +112,6 @@ watch(
activeKeys.value = ['2'];
lock.value = true;
}
//TODO 回传数据
},
{
deep: true,
@ -120,46 +120,31 @@ watch(
);
const onDelete = (_key: string, _parallel: boolean) => {
const newArray = _parallel ? [...parallelArray.value] : [...serialArray.value];
const aIndex = newArray[0].actions?.findIndex(
(aItem) => aItem.key === _key,
);
if (aIndex !== -1) {
if(_parallel){
parallelArray.value[0].actions?.splice(aIndex, 1);
emit('update', parallelArray.value[0], _parallel);
} else {
serialArray.value[0].actions?.splice(aIndex, 1);
emit('update', serialArray.value[0], _parallel);
}
}
const thenName = props.thenOptions.findIndex(item => item.parallel === _parallel)
const actionIndex = FormModel.value.branches?.[props.name].then?.[thenName].actions.findIndex(item => item.key === _key)
if (actionIndex !== -1) {
FormModel.value.branches?.[props.name].then?.[thenName].actions.splice(actionIndex!, 1)
}
};
const onAdd = (actionItem: any, _parallel: boolean) => {
const newArray = _parallel ? [...parallelArray.value] : [...serialArray.value];
if (newArray.length) {
const indexOf = newArray[0].actions?.findIndex(
(aItem) => aItem.key === actionItem.key,
);
if (indexOf !== -1) {
newArray[0].actions.splice(indexOf, 1, actionItem);
} else {
newArray[0].actions.push(actionItem);
}
if(_parallel){
parallelArray.value = [...newArray];
} else {
serialArray.value = [...newArray];
}
emit('update', newArray[0], _parallel);
const thenName = props.thenOptions.findIndex(item => item.parallel === _parallel)
if (thenName !== -1) { // 编辑
const cacheAction = props.thenOptions[thenName].actions
const indexOf = cacheAction?.findIndex(item => item.key === actionItem.key) || -1
if (indexOf !== -1) {
FormModel.value.branches?.[props.name].then?.[thenName].actions.splice(indexOf, 1, actionItem)
} else {
actionItem.key = randomString();
emit('add', {
parallel: _parallel,
key: randomString(),
actions: [actionItem],
});
FormModel.value.branches?.[props.name].then?.[thenName].actions.push(actionItem)
}
} else { // 新增
const newThenItem = {
parallel: _parallel,
key: randomString(),
actions: [actionItem]
}
FormModel.value.branches?.[props.name].then.push(newThenItem)
}
};
</script>

12
src/views/rule-engine/Scene/Save/components/DropdownButton/DropdownButton.vue
View File

@ -15,18 +15,18 @@
</div>
<template #overlay>
<div class='scene-select-content'>
<template v-if='options.length'>
<DropdownTimePicker
v-if='["date","time"].includes(component)'
:type='component'
@change='timeSelect'
/>
<template v-else-if='options.length'>
<drop-menus
v-if='component === "select"'
:value='selectValue'
:options='options'
@click='menuSelect'
/>
<DropdownTimePicker
v-else-if='["date","time"].includes(component)'
:type='component'
@change='timeSelect'
/>
<div style='min-width: 400px' v-else>
<j-tree
:selectedKeys='selectValue ? [selectValue] : []'

2
src/views/rule-engine/Scene/Save/components/ParamsDropdown/Double.vue
View File

@ -6,6 +6,7 @@
:icon='icon'
:placeholder='placeholder'
:tabs-options='tabsOptions'
:metricOptions='metricOptions'
@select='onSelect'
/>
<ParamsDropdown
@ -14,6 +15,7 @@
:icon='icon'
:placeholder='placeholder'
:tabs-options='tabsOptions'
:metricOptions='metricOptions'
:options='options'
@select='onSelect'
/>

58
src/views/rule-engine/Scene/Save/components/ParamsDropdown/index.vue
View File

@ -27,35 +27,45 @@
v-model:value='myValue'
@change='timeChange'
/>
<DropdownMenus
<template
v-else-if='["select","enum", "boolean"].includes(item.component)'
:options='["metric", "upper"].includes(item.key) ? metricOption : options'
@click='onSelect'
/>
<div
v-else-if='item.component === "tree"'
style='min-width: 400px'
>
<j-tree
:selectedKeys='myValue ? [myValue] : []'
:treeData='item.key === "upper" ? metricOption : options'
@select='treeSelect'
:height='450'
:virtual='true'
>
<template #title="{ name, description }">
<j-space>
{{ name }}
<span v-if='description' class='tree-title-description'>{{ description }}</span>
</j-space>
</template>
</j-tree>
</div>
<DropdownMenus
v-if='(["metric", "upper"].includes(item.key) ? metricOptions : options).length'
:options='["metric", "upper"].includes(item.key) ? metricOptions : options'
@click='onSelect'
/>
<div class='scene-select-empty' v-else>
<j-empty />
</div>
</template>
<template v-else-if='item.component === "tree"'>
<div style='min-width: 400px' v-if='(item.key === "upper" ? metricOptions : options).length'>
<j-tree
:selectedKeys='myValue ? [myValue] : []'
:treeData='item.key === "upper" ? metricOptions : options'
@select='treeSelect'
:height='450'
:virtual='true'
>
<template #title="{ name, description }">
<j-space>
{{ name }}
<span v-if='description' class='tree-title-description'>{{ description }}</span>
</j-space>
</template>
</j-tree>
</div>
<div class='scene-select-empty' v-else>
<j-empty />
</div>
</template>
<ValueItem
v-else
v-model:modelValue='myValue'
:itemType='item.component'
:options='item.key === "upper" ? metricOption : options'
:options='item.key === "upper" ? metricOptions : options'
@change='valueItemChange'
/>
</div>
@ -73,8 +83,6 @@ import { defaultSetting } from './typings'
import { DropdownMenus, DropdownTimePicker} from '../DropdownButton'
import { getComponent, getOption } from '../DropdownButton/util'
const valueItemKey = ['int', 'int','long','float','double','string', 'password']
type Emit = {
(e: 'update:value', data: ValueType): void
(e: 'update:source', data: string): void

4
src/views/rule-engine/Scene/Save/components/ParamsDropdown/typings.ts
View File

@ -46,10 +46,6 @@ export const defaultSetting = {
type: Array as PropType<Array<DropdownButtonOptions>>,
default: () => []
},
metricOption: {
type: Array as PropType<Array<DropdownButtonOptions>>,
default: () => []
},
metricOptions: { // 指标值
type: Array as PropType<Array<DropdownButtonOptions>>,
default: () => []

7
src/views/rule-engine/Scene/Save/components/ShakeLimit/index.vue
View File

@ -7,9 +7,9 @@
style="margin-right: 12px"
/>
<template v-if="shakeLimit.enabled">
<j-input-number :min="1" :max="100" :precision="0" size="small" v-model:value="shakeLimit.time" style="width: 32px" />
<j-input-number :min="1" :max="100" :precision="0" size="small" v-model:value="shakeLimit.time" style="width: 38px" />
<span>秒内发送</span>
<j-input-number :min="1" :max="100" :precision="0" size="small" v-model:value="shakeLimit.threshold" style="width: 32px" />
<j-input-number :min="1" :max="100" :precision="0" size="small" v-model:value="shakeLimit.threshold" style="width: 38px" />
<span>次及以上时，处理</span>
<j-radio-group :options="alarmFirstOptions" optionType="button" v-model:value="shakeLimit.alarmFirst" size="small" />
</template>
@ -55,8 +55,7 @@ const shakeLimit = reactive<ShakeLimitType>({
Object.assign(shakeLimit, props.value)
watch(() => shakeLimit, () => {
const cloneValue = cloneDeep(shakeLimit)
emit('update:value', cloneValue)
emit('update:value', {...shakeLimit})
}, {
deep: true
})

1
src/views/rule-engine/Scene/Save/components/Terms/Branchs.vue
View File

@ -54,6 +54,7 @@
:rules='rules'
>
<Action
:name='name'
:openShakeLimit="true"
:thenOptions='FormModel.branches[name].then'
/>

4
src/views/rule-engine/Scene/Save/components/Terms/ParamsItem.vue
View File

@ -40,7 +40,7 @@
icon='icon-canshu'
placeholder='参数值'
:options='valueOptions'
:metricOption='metricOption'
:metricOptions='metricOption'
:tabsOptions='tabsOptions'
v-model:value='paramsValue.value.value'
v-model:source='paramsValue.value.source'
@ -50,7 +50,7 @@
icon='icon-canshu'
placeholder='参数值'
:options='valueOptions'
:metricOption='metricOption'
:metricOptions='metricOption'
:tabsOptions='tabsOptions'
v-model:value='paramsValue.value.value'
v-model:source='paramsValue.value.source'

2
src/views/rule-engine/Scene/Save/components/Terms/Terms.vue
View File

@ -65,8 +65,6 @@ const change = (e: boolean) => {
open.value = e
}
const handleParamsData = (data: any[]): any[] => {
return data?.map(item => {
return {