xuemingqiang/yudao-ui-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 【IoT 物联网】场景联动执行器的 UI 风格对齐触发器

Browse Source
This commit is contained in:
puhui999
2025-08-14 18:03:04 +08:00
parent a5478ffcfe
commit d6f3c511b8
3 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/iot/rule/scene/index.ts
View File

@ -46,28 +46,28 @@ export interface Action {
export const RuleSceneApi = {
// 查询场景联动分页
getRuleScenePage: async (params: any) => {
return await request.get({ url: `/iot/rule-scene/page`, params })
return await request.get({ url: `/iot/scene-rule/page`, params })
},
// 查询场景联动详情
getRuleScene: async (id: number) => {
return await request.get({ url: `/iot/rule-scene/get?id=` + id })
return await request.get({ url: `/iot/scene-rule/get?id=` + id })
},
// 新增场景联动
createRuleScene: async (data: IotSceneRule) => {
return await request.post({ url: `/iot/rule-scene/create`, data })
return await request.post({ url: `/iot/scene-rule/create`, data })
},
// 修改场景联动
updateRuleScene: async (data: IotSceneRule) => {
return await request.put({ url: `/iot/rule-scene/update`, data })
return await request.put({ url: `/iot/scene-rule/update`, data })
},
// 修改场景联动
updateRuleSceneStatus: async (id: number, status: number) => {
return await request.put({
url: `/iot/rule-scene/update-status`,
url: `/iot/scene-rule/update-status`,
data: {
id,
status
@ -77,11 +77,11 @@ export const RuleSceneApi = {
// 删除场景联动
deleteRuleScene: async (id: number) => {
return await request.delete({ url: `/iot/rule-scene/delete?id=` + id })
return await request.delete({ url: `/iot/scene-rule/delete?id=` + id })
},
// 获取场景联动简单列表
getSimpleRuleSceneList: async () => {
return await request.get({ url: `/iot/rule-scene/simple-list` })
return await request.get({ url: `/iot/scene-rule/simple-list` })
}
}

2
src/views/iot/device/device/DeviceForm.vue
View File

@ -98,7 +98,7 @@
:isWrite="true"
:clickMap="true"
:center="formData.location"
@locateChange="handleLocationChange"
@locate-change="handleLocationChange"
ref="mapRef"
class="h-full w-full"
/>

32
src/views/iot/rule/scene/form/sections/ActionSection.vue
View File

@ -1,5 +1,4 @@
<!-- 执行器配置组件 -->
<!-- TODO @puhui999：每个执行器的 UI 风格，应该和【触发器配置】那，有点像 -->
<template>
<el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
<template #header>
@ -35,27 +34,37 @@
</div>
<!-- 执行器列表 -->
<div v-else class="space-y-16px">
<div v-else class="space-y-24px">
<div
v-for="(action, index) in actions"
:key="`action-${index}`"
class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
class="border-2 border-blue-200 rounded-8px bg-blue-50 shadow-sm hover:shadow-md transition-shadow"
>
<div class="flex items-center justify-between mb-16px">
<div class="flex items-center gap-8px">
<Icon icon="ep:setting" class="text-[var(--el-color-success)] text-16px" />
<span>执行器 {{ index + 1 }}</span>
<el-tag :type="getActionTypeTag(action.type)" size="small">
<!-- 执行器头部 - 蓝色主题 -->
<div
class="flex items-center justify-between p-16px bg-gradient-to-r from-blue-50 to-sky-50 border-b border-blue-200 rounded-t-6px"
>
<div class="flex items-center gap-12px">
<div class="flex items-center gap-8px text-16px font-600 text-blue-700">
<div
class="w-24px h-24px bg-blue-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
>
{{ index + 1 }}
</div>
<span>执行器 {{ index + 1 }}</span>
</div>
<el-tag :type="getActionTypeTag(action.type)" size="small" class="font-500">
{{ getActionTypeLabel(action.type) }}
</el-tag>
</div>
<div>
<div class="flex items-center gap-8px">
<el-button
v-if="actions.length > 1"
type="danger"
size="small"
text
@click="removeAction(index)"
v-if="actions.length > 1"
class="hover:bg-red-50"
>
<Icon icon="ep:delete" />
删除
@ -63,7 +72,8 @@
</div>
</div>
<div class="space-y-16px">
<!-- 执行器内容区域 -->
<div class="p-16px space-y-16px">
<!-- 执行类型选择 -->
<div class="w-full">
<el-form-item label="执行类型" required>