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

fix: 删除变红

This commit is contained in:
100011797 2023-03-20 10:44:48 +08:00
parent 6f9db383be
commit edb7f4ce5d
7 changed files with 105 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/CardBox/index.vue
View File

@ -5,7 +5,14 @@
:class="{ active: active ? 'active' : '' }"
@click="handleClick"
>
<div class="card-content">
<div class="card-type" v-if="slots.type">
<div class="card-type-text"><slot name="type"></slot></div>
</div>
<div
class="card-content"
:class="{'card-content-top-line': !slots.type}"
:style="{ paddingTop: slots.type ? '40px' : '30px' }"
>
<div
class="card-content-bg1"
:style="{
@ -94,6 +101,7 @@ type EmitProps = {
type TableActionsType = Partial<ActionsType>;
const emit = defineEmits<EmitProps>();
const slots = useSlots();
const props = defineProps({
value: {
@ -180,6 +188,7 @@ const handleClick = () => {
.card-warp {
position: relative;
border: 1px solid #e6e6e6;
overflow: hidden;
&:hover {
cursor: pointer;
@ -195,25 +204,29 @@ const handleClick = () => {
border: 1px solid #2f54eb;
}
.card-type {
position: absolute;
top: 0;
left: -15px;
height: 32px;
padding: 0 30px;
color: rgba(0, 0, 0, 0.65);
line-height: 32px;
background-color: rgba(0, 0, 0, 0.06);
transform: skewX(-45deg);
.card-type-text {
display: flex;
align-items: center;
justify-content: center;
transform: skewX(45deg);
}
}
.card-content {
position: relative;
padding: 30px 12px 16px 30px;
overflow: hidden;
&::before {
position: absolute;
top: 0;
left: 30px + 10px;
display: block;
width: 15%;
min-width: 64px;
height: 2px;
background-image: url('/images/rectangle.png');
background-repeat: no-repeat;
background-size: 100% 100%;
content: ' ';
}
.card-item-avatar {
margin-right: 16px;
}
@ -276,6 +289,22 @@ const handleClick = () => {
}
}
.card-content-top-line {
&::before {
position: absolute;
top: 0;
left: 30px + 10px;
display: block;
width: 15%;
min-width: 64px;
height: 2px;
background-image: url('/images/rectangle.png');
background-repeat: no-repeat;
background-size: 100% 100%;
content: ' ';
}
}
.card-content-bg1 {
position: absolute;
right: -5%;

3
src/views/Northbound/AliCloud/index.vue
View File

@ -109,7 +109,8 @@
style="padding: 0 5px"
@click="i.onClick"
type="link"
:hasPermission="'Northbound/AliCloud:' + i.key"
:danger="i.key === 'delete'"
:hasPermission="i.key === 'view' ? true : 'Northbound/AliCloud:' + i.key"
>
<template #icon><AIcon :type="i.icon" /></template>
</PermissionButton>

3
src/views/Northbound/DuerOS/index.vue
View File

@ -112,7 +112,8 @@
style="padding: 0 5px"
@click="i.onClick"
type="link"
:hasPermission="'Northbound/DuerOS:' + i.key"
:danger="i.key === 'delete'"
:hasPermission="i.key === 'view' ? true : 'Northbound/DuerOS:' + i.key"
>
<template #icon><AIcon :type="i.icon" /></template>
</PermissionButton>

3
src/views/device/Instance/index.vue
View File

@ -232,7 +232,8 @@
@click="i.onClick"
type="link"
style="padding: 0 5px"
:hasPermission="'device/Instance:' + i.key"
:danger="i.key === 'delete'"
:hasPermission="i.key === 'view' ? true : 'device/Instance:' + i.key"
>
<template #icon><AIcon :type="i.icon" /></template>
</PermissionButton>

15
src/views/edge/Device/index.vue
View File

@ -41,7 +41,7 @@
:status="slotProps.state?.value"
:statusText="slotProps.state?.text"
:statusNames="{
online: 'success',
online: 'processing',
offline: 'error',
notActive: 'warning',
}"
@ -100,9 +100,14 @@
</CardBox>
</template>
<template #state="slotProps">
<j-badge
<BadgeStatus
:status="slotProps.state?.value"
:text="slotProps.state?.text"
:status="statusMap.get(slotProps.state?.value)"
:statusNames="{
online: 'processing',
offline: 'error',
notActive: 'warning',
}"
/>
</template>
<template #createTime="slotProps">
@ -125,7 +130,8 @@
@click="i.onClick"
type="link"
style="padding: 0 5px"
:hasPermission="'edge/Device:' + i.key"
:danger="i.key === 'delete'"
:hasPermission="i.key === 'view' ? true : 'edge/Device:' + i.key"
>
<template #icon><AIcon :type="i.icon" /></template>
</PermissionButton>
@ -155,6 +161,7 @@ import { query, _delete, _deploy, _undeploy } from '@/api/device/instance';
import { restPassword } from '@/api/edge/device';
import Save from './Save/index.vue';
import Import from '@/views/device/Instance/Import/index.vue';
import BadgeStatus from '@/components/BadgeStatus/index.vue';
const menuStory = useMenuStore();

16
src/views/edge/Resource/index.vue
View File

@ -19,7 +19,7 @@
:status="slotProps.state?.value"
:statusText="slotProps.state?.text"
:statusNames="{
enabled: 'success',
enabled: 'processing',
disabled: 'error',
}"
>
@ -81,9 +81,13 @@
</CardBox>
</template>
<template #state="slotProps">
<j-badge
<BadgeStatus
:status="slotProps.state?.value"
:text="slotProps.state?.text"
:status="statusMap.get(slotProps.state?.value)"
:statusNames="{
enabled: 'processing',
disabled: 'error',
}"
/>
</template>
<template #sourceId="slotProps">
@ -115,7 +119,8 @@
@click="i.onClick"
type="link"
style="padding: 0 5px"
:hasPermission="'edge/Resource:' + i.key"
:danger="i.key === 'delete'"
:hasPermission="i.key === 'view' ? true : 'edge/Resource:' + i.key"
>
<template #icon><AIcon :type="i.icon" /></template>
</PermissionButton>
@ -147,13 +152,14 @@ import dayjs from 'dayjs';
import { query, _delete, _start, _stop } from '@/api/edge/resource';
import Save from './Save/index.vue';
import Issue from './Issue/index.vue';
import BadgeStatus from '@/components/BadgeStatus/index.vue';
const menuStory = useMenuStore();
const defaultParams = { sorts: [{ name: 'createTime', order: 'desc' }] };
const statusMap = new Map();
statusMap.set('enabled', 'success');
statusMap.set('enabled', 'processing');
statusMap.set('disabled', 'error');
const options = [

56
src/views/rule-engine/Scene/index.vue
View File

@ -21,13 +21,14 @@
</j-space>
</template>
<template #card="slotProps">
<SceneCard
<CardBox
:value="slotProps"
@click="handleView(slotProps.id, slotProps.triggerType)"
:actions="getActions(slotProps, 'card')"
:status="slotProps.state?.value"
:statusText="slotProps.state?.text"
:statusNames="{
started: 'success',
started: 'processing',
disable: 'error',
}"
>
@ -45,22 +46,19 @@
<template #img>
<img :src="typeMap.get(slotProps.triggerType)?.img" />
</template>
<template #title>
<template #content>
<Ellipsis style="width: calc(100% - 100px)">
<span
style="font-size: 16px; font-weight: 600"
@click.stop="handleView(slotProps.id, slotProps.triggerType)"
>
<span style="font-size: 16px; font-weight: 600">
{{ slotProps.name }}
</span>
</Ellipsis>
</template>
<template #subTitle>
<Ellipsis :lineClamp="2">
说明：{{
slotProps?.description ||
typeMap.get(slotProps.triggerType)?.tip
}}
<div class="subTitle">
说明：{{
slotProps?.description ||
typeMap.get(slotProps.triggerType)?.tip
}}
</div>
</Ellipsis>
</template>
<template #actions="item">
@ -83,15 +81,19 @@
</template>
</PermissionButton>
</template>
</SceneCard>
</CardBox>
</template>
<template #triggerType="slotProps">
{{ typeMap.get(slotProps.triggerType)?.text }}
</template>
<template #state="slotProps">
<j-badge
<BadgeStatus
:status="slotProps.state?.value"
:text="slotProps.state?.text"
:status="statusMap.get(slotProps.state?.value)"
:statusNames="{
enabled: 'processing',
disabled: 'error',
}"
/>
</template>
<template #action="slotProps">
@ -108,8 +110,9 @@
}"
@click="i.onClick"
type="link"
style="padding: 0px"
:hasPermission="'rule-engine/Scene:' + i.key"
:danger="i.key === 'delete'"
style="padding: 0 5px"
:hasPermission="i.key === 'view' ? true : 'rule-engine/Scene:' + i.key"
>
<template #icon><AIcon :type="i.icon" /></template>
</PermissionButton>
@ -130,6 +133,7 @@ import { message } from 'ant-design-vue';
import type { ActionsType } from '@/components/Table';
import { getImage } from '@/utils/comm';
import SceneCard from './SceneCard.vue';
import BadgeStatus from '@/components/BadgeStatus/index.vue';
const menuStory = useMenuStore();
const visible = ref<boolean>(false);
@ -183,7 +187,7 @@ const columns = [
return {
label: item[1]?.text,
value: item[0],
}
};
}),
},
},
@ -202,6 +206,7 @@ const columns = [
{
dataIndex: 'description',
title: '说明',
ellipsis: true,
search: {
type: 'string',
},
@ -211,7 +216,7 @@ const columns = [
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
width: 200,
scopedSlots: true,
},
];
@ -309,15 +314,15 @@ const getActions = (
popConfirm: {
title: '',
onConfirm: async () => {
const resp = await _execute(data.id)
const resp = await _execute(data.id);
if (resp.status === 200) {
message.success('操作成功！');
sceneRef.value?.reload();
} else {
message.error('操作失败！');
}
}
}
},
},
};
actions.splice(1, 0, _item);
}
@ -374,4 +379,9 @@ const handleView = (id: string, triggerType: string) => {
</script>
<style scoped>
.subTitle {
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
margin-top: 10px;
}
</style>