fix: 卡片背景颜色
This commit is contained in:
100011797
parent
34bff0ecb4
commit
dc486af223
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
|
@ -1,12 +1,12 @@
|
|||
|
||||
const color = {
|
||||
'processing': '64, 169, 255',
|
||||
'error': '247, 79, 70',
|
||||
'success': '74, 234, 220',
|
||||
'warning': '250, 178, 71',
|
||||
'default': '63, 73, 96'
|
||||
'processing': '9, 46, 231',
|
||||
'error': '229, 0, 18',
|
||||
'success': '36, 178, 118',
|
||||
'warning': '255, 144, 0',
|
||||
'default': '102, 102, 102'
|
||||
}
|
||||
export const getHexColor = (code: string, pe: number = 0.3) => {
|
||||
export const getHexColor = (code: string, pe: number = 0.1) => {
|
||||
const _color = color[code] || color.default
|
||||
if (code === 'default') {
|
||||
pe = 0.1
|
||||
|
|
|
|||
|
|
@ -6,6 +6,18 @@
|
|||
@click="handleClick"
|
||||
>
|
||||
<div class="card-content">
|
||||
<div
|
||||
class="card-content-bg1"
|
||||
:style="{
|
||||
background: getBackgroundColor(statusNames[status]),
|
||||
}"
|
||||
></div>
|
||||
<div
|
||||
class="card-content-bg2"
|
||||
:style="{
|
||||
background: getBackgroundColor(statusNames[status]),
|
||||
}"
|
||||
></div>
|
||||
<div style="display: flex">
|
||||
<!-- 图片 -->
|
||||
<div class="card-item-avatar">
|
||||
|
|
@ -17,21 +29,19 @@
|
|||
<slot name="content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 勾选 -->
|
||||
<div v-if="active" class="checked-icon">
|
||||
<div>
|
||||
<AIcon type="CheckOutlined" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态 -->
|
||||
<div
|
||||
v-if="showStatus"
|
||||
class="card-state"
|
||||
:style='{
|
||||
backgroundColor: getHexColor(statusNames[status])
|
||||
}'
|
||||
:style="{
|
||||
backgroundColor: getHexColor(statusNames[status]),
|
||||
}"
|
||||
>
|
||||
<div class="card-state-content">
|
||||
<BadgeStatus
|
||||
|
|
@ -72,7 +82,7 @@
|
|||
|
||||
<script setup lang="ts" name='CardBox'>
|
||||
import BadgeStatus from '@/components/BadgeStatus/index.vue';
|
||||
import { getHexColor } from '../BadgeStatus/color'
|
||||
import color, { getHexColor } from '../BadgeStatus/color';
|
||||
import type { ActionsType } from '@/components/Table';
|
||||
import { PropType } from 'vue';
|
||||
|
||||
|
|
@ -123,6 +133,15 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const getBackgroundColor = (code: string) => {
|
||||
const _color = color[code] || color.default;
|
||||
return `linear-gradient(
|
||||
188.4deg,
|
||||
rgba(${_color}, 0.03) 22.94%,
|
||||
rgba(${_color}, 0) 94.62%
|
||||
)`;
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
emit('click', props.value);
|
||||
};
|
||||
|
|
@ -257,6 +276,33 @@ const handleClick = () => {
|
|||
}
|
||||
}
|
||||
|
||||
.card-content-bg1 {
|
||||
position: absolute;
|
||||
right: -5%;
|
||||
height: 100%;
|
||||
width: 44.65%;
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
188.4deg,
|
||||
rgba(229, 0, 18, 0.03) 22.94%,
|
||||
rgba(229, 0, 18, 0) 94.62%
|
||||
);
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
|
||||
.card-content-bg2 {
|
||||
position: absolute;
|
||||
right: -5%;
|
||||
height: 100%;
|
||||
width: calc(44.65% + 34px);
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
188.4deg,
|
||||
rgba(229, 0, 18, 0.03) 22.94%,
|
||||
rgba(229, 0, 18, 0) 94.62%
|
||||
);
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
.card-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -268,7 +314,7 @@ const handleClick = () => {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background-color: rgba(#000, .5);
|
||||
background-color: rgba(#000, 0.5);
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
|
|
|||
|
|
@ -27,11 +27,12 @@
|
|||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleView(slotProps.id)"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
|
|
@ -39,19 +40,20 @@
|
|||
<img :src="getImage('/northbound/aliyun.png')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<h3
|
||||
class="card-item-content-title"
|
||||
@click.stop="handleView(slotProps.id)"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 15px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
网桥产品
|
||||
</div>
|
||||
<Ellipsis>
|
||||
<div>{{ slotProps?.bridgeProductName }}</div>
|
||||
<div>
|
||||
{{ slotProps?.bridgeProductName }}
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
|
|
@ -85,9 +87,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 #action="slotProps">
|
||||
|
|
@ -100,7 +106,7 @@
|
|||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="i.tooltip"
|
||||
style="padding: 0px"
|
||||
style="padding: 0 5px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:hasPermission="'Northbound/AliCloud:' + i.key"
|
||||
|
|
@ -116,20 +122,17 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { query, _undeploy, _deploy, _delete } from '@/api/northbound/alicloud';
|
||||
import type { ActionsType } from '@/views/device/Instance/typings'
|
||||
import type { ActionsType } from '@/views/device/Instance/typings';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
import BadgeStatus from '@/components/BadgeStatus/index.vue';
|
||||
|
||||
const instanceRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
|
||||
const menuStory = useMenuStore();
|
||||
|
||||
const statusMap = new Map();
|
||||
statusMap.set('enabled', 'success');
|
||||
statusMap.set('disabled', 'error');
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '名称',
|
||||
|
|
@ -151,6 +154,7 @@ const columns = [
|
|||
title: '说明',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
|
|
@ -172,7 +176,7 @@ const columns = [
|
|||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250,
|
||||
width: 200,
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,47 +1,71 @@
|
|||
<template>
|
||||
<j-table
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
bordered
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<div style="width: 280px">
|
||||
<template v-if="['valueType', 'name'].includes(column.dataIndex)">
|
||||
<span>{{ text }}</span>
|
||||
<div class="inputs">
|
||||
<j-form ref="formRef" :model="modelRef">
|
||||
<j-table
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:data-source="modelRef.dataSource"
|
||||
bordered
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'value'">
|
||||
<j-form-item
|
||||
:name="['dataSource', index, 'value']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message:
|
||||
record.type === 'enum' ||
|
||||
record.type === 'boolean'
|
||||
? '请选择'
|
||||
: '请输入',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<ValueItem
|
||||
v-model:modelValue="record.value"
|
||||
:itemType="record.type"
|
||||
:options="
|
||||
record.type === 'enum'
|
||||
? (
|
||||
record?.dataType?.elements || []
|
||||
).map((item) => {
|
||||
return {
|
||||
label: item.text,
|
||||
value: item.value,
|
||||
};
|
||||
})
|
||||
: record.type === 'boolean'
|
||||
? [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
]
|
||||
: undefined
|
||||
"
|
||||
@change="onChange"
|
||||
/>
|
||||
</j-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<j-form-item
|
||||
:name="['dataSource', index, column.dataIndex]"
|
||||
>
|
||||
<j-input
|
||||
readonly
|
||||
:bordered="false"
|
||||
v-model:value="record[column.dataIndex]"
|
||||
/>
|
||||
</j-form-item>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ValueItem
|
||||
v-model:modelValue="record.value"
|
||||
:itemType="record.type"
|
||||
:options="
|
||||
record.type === 'enum'
|
||||
? (record?.dataType?.elements || []).map(
|
||||
(item) => {
|
||||
return {
|
||||
label: item.text,
|
||||
value: item.value,
|
||||
};
|
||||
},
|
||||
)
|
||||
: record.type === 'boolean'
|
||||
? [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
]
|
||||
: undefined
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</j-table>
|
||||
</j-table>
|
||||
</j-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from "vue";
|
||||
|
||||
import { PropType } from 'vue';
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:modelValue', data: Record<string, any>[]): void;
|
||||
|
|
@ -52,9 +76,14 @@ const _props = defineProps({
|
|||
modelValue: {
|
||||
type: Array as PropType<Record<string, any>[]>,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
});
|
||||
const columns = [
|
||||
// {
|
||||
// title: 'ID',
|
||||
// dataIndex: 'id',
|
||||
// with: '33%',
|
||||
// },
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
|
|
@ -72,22 +101,35 @@ const columns = [
|
|||
},
|
||||
];
|
||||
|
||||
// const dataSource = ref<Record<any, any>[]>(_props.modelValue || []);
|
||||
const modelRef = reactive<{
|
||||
dataSource: any[];
|
||||
}>({
|
||||
dataSource: [],
|
||||
});
|
||||
const formRef = ref();
|
||||
|
||||
const dataSource = computed({
|
||||
get: () => {
|
||||
return _props.modelValue || {
|
||||
messageType: undefined,
|
||||
message: {
|
||||
properties: undefined,
|
||||
functionId: undefined,
|
||||
inputs: []
|
||||
}
|
||||
}
|
||||
},
|
||||
set: (val: any) => {
|
||||
_emit('update:modelValue', val);
|
||||
}
|
||||
})
|
||||
watchEffect(() => {
|
||||
modelRef.dataSource = _props.modelValue || [];
|
||||
});
|
||||
|
||||
</script>
|
||||
const onChange = () => {
|
||||
_emit('update:modelValue', modelRef.dataSource);
|
||||
};
|
||||
|
||||
const onSave = () =>
|
||||
new Promise((resolve, reject) => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
resolve([...modelRef.dataSource]);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
|
||||
defineExpose({ onSave });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
|
|
@ -1,76 +1,156 @@
|
|||
<template>
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
ref="formRef"
|
||||
:model="modelRef"
|
||||
>
|
||||
<j-form :layout="'vertical'" ref="formRef" :model="modelRef">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="24" v-if="actionType === 'command'">
|
||||
<j-form-item name="messageType" label="指令类型" :rules="{
|
||||
required: true,
|
||||
message: '请选择指令类型',
|
||||
}" class="other">
|
||||
<j-select placeholder="请选择指令类型" v-model:value="modelRef.messageType" show-search>
|
||||
<j-select-option value="READ_PROPERTY">读取属性</j-select-option>
|
||||
<j-select-option value="WRITE_PROPERTY">修改属性</j-select-option>
|
||||
<j-select-option value="INVOKE_FUNCTION">调用功能</j-select-option>
|
||||
<j-form-item
|
||||
name="messageType"
|
||||
label="指令类型"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择指令类型',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择指令类型"
|
||||
v-model:value="modelRef.messageType"
|
||||
show-search
|
||||
>
|
||||
<j-select-option value="READ_PROPERTY"
|
||||
>读取属性</j-select-option
|
||||
>
|
||||
<j-select-option value="WRITE_PROPERTY"
|
||||
>修改属性</j-select-option
|
||||
>
|
||||
<j-select-option value="INVOKE_FUNCTION"
|
||||
>调用功能</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="(modelRef.messageType === 'READ_PROPERTY' || actionType === 'latestData') ? 24 : 12" v-if="(actionType === 'command' && ['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)) || actionType === 'latestData'">
|
||||
<j-form-item :name="['message', 'properties']" label="属性" :rules="{
|
||||
required: true,
|
||||
message: '请选择属性',
|
||||
}">
|
||||
<j-select placeholder="请选择属性" v-model:value="modelRef.message.properties" show-search @change="onPropertyChange">
|
||||
<j-select-option v-for="i in (metadata?.properties) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</j-select-option>
|
||||
<j-col
|
||||
:span="
|
||||
modelRef.messageType === 'READ_PROPERTY' ||
|
||||
actionType === 'latestData'
|
||||
? 24
|
||||
: 12
|
||||
"
|
||||
v-if="
|
||||
(actionType === 'command' &&
|
||||
['READ_PROPERTY', 'WRITE_PROPERTY'].includes(
|
||||
modelRef.messageType,
|
||||
)) ||
|
||||
actionType === 'latestData'
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
:name="['message', 'properties']"
|
||||
label="属性"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择属性',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择属性"
|
||||
v-model:value="modelRef.message.properties"
|
||||
show-search
|
||||
@change="onPropertyChange"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in metadata?.properties || []"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
:label="i.name"
|
||||
>{{ i.name }}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12" v-if="modelRef.messageType === 'WRITE_PROPERTY' && actionType === 'command'">
|
||||
<j-form-item :name="['message', 'value']" label="值" :rules="{
|
||||
required: true,
|
||||
message: '请输入值',
|
||||
}">
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
modelRef.messageType === 'WRITE_PROPERTY' &&
|
||||
actionType === 'command'
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
:name="['message', 'value']"
|
||||
label="值"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入值',
|
||||
}"
|
||||
>
|
||||
<ValueItem
|
||||
v-model:modelValue="modelRef.message.value"
|
||||
:itemType="property.type || property.valueType?.type || 'int'"
|
||||
:itemType="
|
||||
property.type || property.valueType?.type || 'int'
|
||||
"
|
||||
:options="
|
||||
property.valueType?.type === 'enum'
|
||||
? (property?.dataType?.elements || []).map(
|
||||
(item) => {
|
||||
return {
|
||||
label: item?.text,
|
||||
value: item?.value,
|
||||
};
|
||||
},
|
||||
)
|
||||
(item) => {
|
||||
return {
|
||||
label: item?.text,
|
||||
value: item?.value,
|
||||
};
|
||||
},
|
||||
)
|
||||
: property.valueType?.type === 'boolean'
|
||||
? [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
]
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
]
|
||||
: undefined
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
|
||||
<j-form-item :name="['message', 'functionId']" label="功能" :rules="{
|
||||
required: true,
|
||||
message: '请选择功能',
|
||||
}">
|
||||
<j-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" show-search @change="funcChange">
|
||||
<j-select-option v-for="i in (metadata?.functions) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</j-select-option>
|
||||
<j-form-item
|
||||
:name="['message', 'functionId']"
|
||||
label="功能"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择功能',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择功能"
|
||||
v-model:value="modelRef.message.functionId"
|
||||
show-search
|
||||
@change="funcChange"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in metadata?.functions || []"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
:label="i.name"
|
||||
>{{ i.name }}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
|
||||
<j-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
|
||||
required: true,
|
||||
message: '请输入参数列表',
|
||||
}">
|
||||
<EditTable v-model="modelRef.message.inputs"/>
|
||||
<j-col
|
||||
:span="24"
|
||||
v-if="
|
||||
modelRef.messageType === 'INVOKE_FUNCTION' &&
|
||||
modelRef.message.functionId
|
||||
"
|
||||
class="inputs"
|
||||
>
|
||||
<j-form-item
|
||||
:name="['message', 'inputs']"
|
||||
label="参数列表"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入参数列表',
|
||||
}"
|
||||
>
|
||||
<EditTable
|
||||
ref="editRef"
|
||||
v-model="modelRef.message.inputs"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
|
@ -78,101 +158,106 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import EditTable from './EditTable.vue'
|
||||
import EditTable from './EditTable.vue';
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const props = defineProps({
|
||||
actionType: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => {},
|
||||
},
|
||||
metadata: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
properties: [],
|
||||
functions: []
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
functions: [],
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:modelValue', data: any): void;
|
||||
};
|
||||
const editRef = ref();
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
const modelRef = reactive({
|
||||
messageType: 'READ_PROPERTY',
|
||||
message: {
|
||||
properties: undefined,
|
||||
functionId: undefined,
|
||||
inputs: [],
|
||||
},
|
||||
});
|
||||
|
||||
const modelRef = computed({
|
||||
get: () => {
|
||||
onPropertyChange(props.modelValue?.message?.properties)
|
||||
return props.modelValue || {
|
||||
messageType: undefined,
|
||||
message: {
|
||||
properties: undefined,
|
||||
functionId: undefined,
|
||||
inputs: []
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
Object.assign(modelRef, newVal);
|
||||
if(newVal?.message?.properties){
|
||||
onPropertyChange(newVal?.message?.properties);
|
||||
}
|
||||
}
|
||||
},
|
||||
set: (val: any) => {
|
||||
emit('update:modelValue', val);
|
||||
}
|
||||
})
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const property = ref<any>({})
|
||||
const property = ref<any>({});
|
||||
|
||||
const funcChange = (val: string) => {
|
||||
if(val){
|
||||
const arr = props.metadata?.functions.find((item: any) => item.id === val)?.inputs || []
|
||||
if (val) {
|
||||
const arr =
|
||||
props.metadata?.functions.find((item: any) => item.id === val)
|
||||
?.inputs || [];
|
||||
const list = arr.map((item: any) => {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
value: undefined,
|
||||
valueType: item?.valueType?.type,
|
||||
}
|
||||
})
|
||||
modelRef.value.message.inputs = list
|
||||
};
|
||||
});
|
||||
modelRef.message.inputs = list;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onPropertyChange = (val: string) => {
|
||||
if(val){
|
||||
const _item = props.metadata?.properties.find((item: any) => item.id === val)
|
||||
property.value = _item?.[0] || {}
|
||||
if (val) {
|
||||
const _item = props.metadata?.properties.find(
|
||||
(item: any) => item.id === val,
|
||||
);
|
||||
property.value = _item?.[0] || {};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const saveBtn = () => new Promise((resolve) => {
|
||||
formRef.value.validate()
|
||||
.then(() => {
|
||||
const _arr = toRaw(modelRef).value?.message?.inputs || []
|
||||
if(_arr.length && !_arr.every((_a: any) => _a.value)){
|
||||
resolve(false)
|
||||
} else {
|
||||
resolve(toRaw(modelRef))
|
||||
}
|
||||
})
|
||||
.catch((err: any) => {
|
||||
resolve(err)
|
||||
const saveBtn = () =>
|
||||
new Promise((resolve) => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async (_data: any) => {
|
||||
await editRef.value.onSave().catch(() => {
|
||||
resolve(false)
|
||||
})
|
||||
resolve(_data)
|
||||
})
|
||||
.catch((err: any) => {
|
||||
resolve(err);
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
defineExpose({ saveBtn })
|
||||
|
||||
defineExpose({ saveBtn });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-form-item){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.other {
|
||||
margin-bottom: 24px;
|
||||
.inputs {
|
||||
.ant-form-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -171,7 +171,8 @@
|
|||
>
|
||||
<j-select-option
|
||||
v-for="i in getTypesActions(
|
||||
item.action || ''
|
||||
item.action ||
|
||||
'',
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
|
|
@ -321,7 +322,8 @@
|
|||
>
|
||||
<j-select-option
|
||||
v-for="i in getDuerOSProperties(
|
||||
item.source || '',
|
||||
item.source ||
|
||||
'',
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
|
|
@ -410,7 +412,10 @@
|
|||
type="primary"
|
||||
:loading="loading"
|
||||
@click="saveBtn"
|
||||
:hasPermission="['Northbound/DuerOS:add', 'Northbound/DuerOS:update']"
|
||||
:hasPermission="[
|
||||
'Northbound/DuerOS:add',
|
||||
'Northbound/DuerOS:update',
|
||||
]"
|
||||
>
|
||||
保存
|
||||
</PermissionButton>
|
||||
|
|
@ -626,12 +631,11 @@ const saveBtn = async () => {
|
|||
loading.value = true;
|
||||
const resp = await savePatch(data).finally(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
formRef.value.resetFields();
|
||||
menuStory.jumpPage('Northbound/DuerOS');
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -27,11 +27,12 @@
|
|||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleView(slotProps.id)"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
|
|
@ -39,13 +40,12 @@
|
|||
<img :src="getImage('/cloud/dueros.png')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<h3
|
||||
class="card-item-content-title"
|
||||
@click.stop="handleView(slotProps.id)"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 15px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">产品</div>
|
||||
<Ellipsis>
|
||||
|
|
@ -85,9 +85,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 #applianceType="slotProps">
|
||||
|
|
@ -105,7 +109,7 @@
|
|||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
style="padding: 0 5px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:hasPermission="'Northbound/DuerOS:' + i.key"
|
||||
|
|
@ -132,15 +136,12 @@ import type { ActionsType } from '@/views/device/Instance/typings';
|
|||
import { getImage } from '@/utils/comm';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
import BadgeStatus from '@/components/BadgeStatus/index.vue';
|
||||
|
||||
const instanceRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
const menuStory = useMenuStore();
|
||||
|
||||
const statusMap = new Map();
|
||||
statusMap.set('enabled', 'success');
|
||||
statusMap.set('disabled', 'error');
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '名称',
|
||||
|
|
@ -193,6 +194,7 @@ const columns = [
|
|||
title: '说明',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
|
|
@ -211,7 +213,7 @@ const columns = [
|
|||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250,
|
||||
width: 200,
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -8,20 +8,25 @@
|
|||
<template #title>
|
||||
<div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<AIcon type="ArrowLeftOutlined" @click="onBack" />
|
||||
<div style="margin-left: 20px">
|
||||
<j-button @click="onBack" size="small">返回</j-button>
|
||||
<div style="margin-left: 20px; font-size: 24px">
|
||||
{{ instanceStore.current.name }}
|
||||
</div>
|
||||
<j-divider type="vertical" />
|
||||
<j-space>
|
||||
<j-badge
|
||||
:text="instanceStore.current.state?.text"
|
||||
:status="
|
||||
statusMap.get(
|
||||
instanceStore.current.state?.value,
|
||||
)
|
||||
"
|
||||
/>
|
||||
<span
|
||||
style="font-size: 14px; color: rgba(0, 0, 0, 0.85)"
|
||||
>
|
||||
状态：
|
||||
<j-badge
|
||||
:status="
|
||||
statusMap.get(
|
||||
instanceStore.current.state?.value,
|
||||
)
|
||||
"
|
||||
/>
|
||||
{{ instanceStore.current.state?.text }}
|
||||
</span>
|
||||
<PermissionButton
|
||||
v-if="
|
||||
instanceStore.current.state?.value ===
|
||||
|
|
@ -73,7 +78,7 @@
|
|||
</j-tooltip>
|
||||
</j-space>
|
||||
</div>
|
||||
<div style="padding-top: 10px">
|
||||
<div style="padding-top: 24px">
|
||||
<j-descriptions size="small" :column="4">
|
||||
<j-descriptions-item label="ID">{{
|
||||
instanceStore.current.id
|
||||
|
|
@ -199,8 +204,8 @@ watch(
|
|||
);
|
||||
|
||||
onMounted(() => {
|
||||
instanceStore.tabActiveKey = history.state?.params?.tab || 'Info'
|
||||
})
|
||||
instanceStore.tabActiveKey = history.state?.params?.tab || 'Info';
|
||||
});
|
||||
|
||||
const onBack = () => {
|
||||
menuStory.jumpPage('device/Instance');
|
||||
|
|
@ -284,7 +289,10 @@ watchEffect(() => {
|
|||
tab: 'OPC UA',
|
||||
});
|
||||
}
|
||||
if (instanceStore.current.deviceType?.value === 'gateway' && !keys.includes('ChildDevice')) {
|
||||
if (
|
||||
instanceStore.current.deviceType?.value === 'gateway' &&
|
||||
!keys.includes('ChildDevice')
|
||||
) {
|
||||
// 产品类型为网关的情况下才显示此模块
|
||||
list.value.push({
|
||||
key: 'ChildDevice',
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@
|
|||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'success',
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
|
|
@ -202,9 +202,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">
|
||||
|
|
@ -226,7 +231,7 @@
|
|||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
style="padding: 0 5px"
|
||||
:hasPermission="'device/Instance:' + i.key"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
|
|
@ -289,6 +294,7 @@ import { queryTree } from '@/api/device/category';
|
|||
import { useMenuStore } from '@/store/menu';
|
||||
import type { ActionsType } from './typings';
|
||||
import dayjs from 'dayjs';
|
||||
import BadgeStatus from '@/components/BadgeStatus/index.vue';
|
||||
|
||||
const instanceRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
|
|
@ -303,11 +309,6 @@ const type = ref<string>('');
|
|||
|
||||
const menuStory = useMenuStore();
|
||||
|
||||
const statusMap = new Map();
|
||||
statusMap.set('online', 'success');
|
||||
statusMap.set('offline', 'error');
|
||||
statusMap.set('notActive', 'warning');
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
|
|
@ -479,6 +480,7 @@ const columns = [
|
|||
title: '说明',
|
||||
dataIndex: 'describe',
|
||||
key: 'describe',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
|
|
@ -487,7 +489,7 @@ const columns = [
|
|||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250,
|
||||
width: 200,
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
|
|
@ -525,10 +527,10 @@ const paramsFormat = (
|
|||
};
|
||||
|
||||
onMounted(() => {
|
||||
if(history.state?.params?.type === 'add'){
|
||||
handleAdd()
|
||||
if (history.state?.params?.type === 'add') {
|
||||
handleAdd();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const handleParams = (config: Record<string, any>) => {
|
||||
const _terms: Record<string, any> = {};
|
||||
|
|
|
|||
Loading…
Reference in New Issue