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

update: 优化场景联动自适应样式

This commit is contained in:
xieyonghong 2023-03-17 09:37:37 +08:00
parent a277fe1cb6
commit e9e7431dd8
4 changed files with 76 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,63 +1,63 @@
<template> <template>
<div class="actions"> <div class="actions">
<div class="actions-title"> <div class="actions-title">
<span>执行</span> <span>执行</span>
<ShakeLimit <ShakeLimit
v-if="props.openShakeLimit" v-if="props.openShakeLimit"
v-model:value="FormModel.branches[name].shakeLimit" v-model:value="FormModel.branches[name].shakeLimit"
/> />
</div>
<div class="actions-warp">
<j-collapse v-model:activeKey="activeKeys">
<j-collapse-panel key="1">
<template #header>
<span>
串行
<span class="panel-tip">
按顺序依次执行动作，适用于基于动作输出参数，判断是否执行后续动作的场景
</span>
</span>
</template>
<div class="actions-list">
<List
type="serial"
:branchesName="name"
:parallel="false"
:actions="
serialArray.length ? serialArray[0].actions : []
"
@add="(_item) => onAdd(_item, false)"
@delete="(_key) => onDelete(_key, false)"
/>
</div>
</j-collapse-panel>
<j-collapse-panel key="2">
<template #header>
<span>
并行
<span class="panel-tip">
同时执行所有动作，适用于不需要关注执行动作先后顺序和结果的场景
</span>
</span>
</template>
<div class="actions-list">
<List
type="parallel"
:branchesName="name"
:parallel="true"
:actions="
parallelArray.length
? parallelArray[0].actions
: []
"
@add="(_item) => onAdd(_item, true)"
@delete="(_key) => onDelete(_key, true)"
/>
</div>
</j-collapse-panel>
</j-collapse>
</div>
</div> </div>
<div class="actions-warp">
<j-collapse v-model:activeKey="activeKeys">
<j-collapse-panel key="1">
<template #header>
<span>
串行
<span class="panel-tip">
按顺序依次执行动作，适用于基于动作输出参数，判断是否执行后续动作的场景
</span>
</span>
</template>
<div class="actions-list">
<List
type="serial"
:branchesName="name"
:parallel="false"
:actions="
serialArray.length ? serialArray[0].actions : []
"
@add="(_item) => onAdd(_item, false)"
@delete="(_key) => onDelete(_key, false)"
/>
</div>
</j-collapse-panel>
<j-collapse-panel key="2">
<template #header>
<span>
并行
<span class="panel-tip">
同时执行所有动作，适用于不需要关注执行动作先后顺序和结果的场景
</span>
</span>
</template>
<div class="actions-list">
<List
type="parallel"
:branchesName="name"
:parallel="true"
:actions="
parallelArray.length
? parallelArray[0].actions
: []
"
@add="(_item) => onAdd(_item, true)"
@delete="(_key) => onDelete(_key, true)"
/>
</div>
</j-collapse-panel>
</j-collapse>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

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

@ -1,5 +1,5 @@
<template> <template>
<div :class='["actions-terms-warp", props.class]'> <div :class='["actions-terms-warp", isFirst ? "first-children" : ""]'>
<div class='actions-terms-title'> <div class='actions-terms-title'>
{{ isFirst ? '当' : '否则' }} {{ isFirst ? '当' : '否则' }}
</div> </div>

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

@ -32,13 +32,6 @@
</div> </div>
</template> </template>
</template> </template>
<!-- <j-form-item-->
<!-- v-else-->
<!-- :name='["branches", 0, "then"]'-->
<!-- :rules='rules'-->
<!-- >-->
<!-- -->
<!-- </j-form-item>-->
</div> </div>
</template> </template>

25
src/views/rule-engine/Scene/Save/components/Terms/index.less
View File

@ -49,16 +49,8 @@
.actions-terms { .actions-terms {
.actions-terms-warp { .actions-terms-warp {
display: flex; display: flex;
//width: 66.66%;
margin-bottom: 24px; margin-bottom: 24px;
&.first-children {
width: 100%;
.actions-branches {
width: 66.66%;
}
}
&.first-children, &.first-children,
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -212,4 +204,21 @@
} }
} }
@minWidth: 75%;
@media (min-width: 1600px) {
.actions-terms {
.actions-terms-warp {
width: @minWidth;
&.first-children {
width: 100%;
.actions-branches {
width: calc(@minWidth - 12px);
}
}
}
}
}