fix: 加fullpage
This commit is contained in:
100011797
parent
8239b2c308
commit
c38923f468
|
|
@ -57,7 +57,7 @@ import { getImage } from '@/utils/comm';
|
|||
|
||||
<style lang="less" scoped>
|
||||
.doc {
|
||||
height: 1000px;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<FullPage>
|
||||
<j-card>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="16">
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="left-content">
|
||||
<TitleComponent data="基本信息" />
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
|
|
@ -49,7 +51,9 @@
|
|||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
|
|
@ -57,7 +61,8 @@
|
|||
<j-select
|
||||
placeholder="请选择服务地址"
|
||||
v-model:value="
|
||||
modelRef.accessConfig.regionId
|
||||
modelRef.accessConfig
|
||||
.regionId
|
||||
"
|
||||
show-search
|
||||
@blur="productChange"
|
||||
|
|
@ -67,14 +72,19 @@
|
|||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{ item.name }}</j-select-option
|
||||
>{{
|
||||
item.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="['accessConfig', 'instanceId']"
|
||||
:name="[
|
||||
'accessConfig',
|
||||
'instanceId',
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
|
|
@ -84,7 +94,9 @@
|
|||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
|
|
@ -92,7 +104,8 @@
|
|||
<j-input
|
||||
placeholder="请输入实例ID"
|
||||
v-model:value="
|
||||
modelRef.accessConfig.instanceId
|
||||
modelRef.accessConfig
|
||||
.instanceId
|
||||
"
|
||||
@blur="productChange"
|
||||
/>
|
||||
|
|
@ -100,7 +113,10 @@
|
|||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="['accessConfig', 'accessKeyId']"
|
||||
:name="[
|
||||
'accessConfig',
|
||||
'accessKeyId',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
|
|
@ -120,7 +136,9 @@
|
|||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
|
|
@ -128,7 +146,8 @@
|
|||
<j-input
|
||||
placeholder="请输入accessKey"
|
||||
v-model:value="
|
||||
modelRef.accessConfig.accessKeyId
|
||||
modelRef.accessConfig
|
||||
.accessKeyId
|
||||
"
|
||||
@blur="productChange"
|
||||
/>
|
||||
|
|
@ -136,11 +155,15 @@
|
|||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="['accessConfig', 'accessSecret']"
|
||||
:name="[
|
||||
'accessConfig',
|
||||
'accessSecret',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入accessSecret',
|
||||
message:
|
||||
'请输入accessSecret',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
|
|
@ -156,7 +179,9 @@
|
|||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
|
|
@ -164,7 +189,8 @@
|
|||
<j-input
|
||||
placeholder="请输入accessSecret"
|
||||
v-model:value="
|
||||
modelRef.accessConfig.accessSecret
|
||||
modelRef.accessConfig
|
||||
.accessSecret
|
||||
"
|
||||
@blur="productChange"
|
||||
/>
|
||||
|
|
@ -186,7 +212,9 @@
|
|||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
|
|
@ -224,11 +252,12 @@
|
|||
:key="index"
|
||||
:header="
|
||||
item.productKey
|
||||
? (aliyunProductList.find(
|
||||
? aliyunProductList.find(
|
||||
(i) =>
|
||||
i.productKey ===
|
||||
item.productKey,
|
||||
)?.productName || `产品映射${index + 1}`)
|
||||
)?.productName ||
|
||||
`产品映射${index + 1}`
|
||||
: `产品映射${index + 1}`
|
||||
"
|
||||
>
|
||||
|
|
@ -261,9 +290,12 @@
|
|||
>
|
||||
<j-select-option
|
||||
v-for="i in getAliyunProductList(
|
||||
item?.productKey || ''
|
||||
item?.productKey ||
|
||||
'',
|
||||
)"
|
||||
:key="i.productKey"
|
||||
:key="
|
||||
i.productKey
|
||||
"
|
||||
:value="
|
||||
i.productKey
|
||||
"
|
||||
|
|
@ -300,11 +332,16 @@
|
|||
>
|
||||
<j-select-option
|
||||
v-for="i in getPlatProduct(
|
||||
item.productId || ''
|
||||
item.productId ||
|
||||
'',
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="i?.id"
|
||||
:label="i.name"
|
||||
:value="
|
||||
i?.id
|
||||
"
|
||||
:label="
|
||||
i.name
|
||||
"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
|
|
@ -322,7 +359,10 @@
|
|||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
style="
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
"
|
||||
@click="addItem"
|
||||
>
|
||||
<AIcon
|
||||
|
|
@ -341,7 +381,9 @@
|
|||
}"
|
||||
>
|
||||
<j-textarea
|
||||
v-model:value="modelRef.description"
|
||||
v-model:value="
|
||||
modelRef.description
|
||||
"
|
||||
placeholder="请输入说明"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
|
|
@ -355,17 +397,22 @@
|
|||
type="primary"
|
||||
:loading="loading"
|
||||
@click="saveBtn"
|
||||
:hasPermission="['Northbound/AliCloud:add', 'Northbound/AliCloud:update']"
|
||||
:hasPermission="[
|
||||
'Northbound/AliCloud:add',
|
||||
'Northbound/AliCloud:update',
|
||||
]"
|
||||
>
|
||||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<Doc />
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</div>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -489,14 +536,16 @@ const saveBtn = () => {
|
|||
.validate()
|
||||
.then(async (data: any) => {
|
||||
const product = (aliyunProductList.value || []).find(
|
||||
(item: any) =>
|
||||
item?.productKey === data?.bridgeProductKey,
|
||||
(item: any) => item?.productKey === data?.bridgeProductKey,
|
||||
);
|
||||
data.bridgeProductName = product?.productName || '';
|
||||
loading.value = true;
|
||||
const resp = await savePatch({...toRaw(modelRef), ...data}).finally(() => {
|
||||
const resp = await savePatch({
|
||||
...toRaw(modelRef),
|
||||
...data,
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
formRef.value.resetFields();
|
||||
|
|
@ -540,3 +589,22 @@ watch(
|
|||
{ immediate: true, deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box {
|
||||
position: relative;
|
||||
.left {
|
||||
.left-content {
|
||||
width: 66%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 33%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,11 +5,14 @@
|
|||
target="northbound-aliyun"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
|
|
@ -19,7 +22,9 @@
|
|||
@click="handleAdd"
|
||||
hasPermission="Northbound/AliCloud:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
|
|
@ -72,7 +77,9 @@
|
|||
:popConfirm="item.popConfirm"
|
||||
:tooltip="item.tooltip"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'Northbound/AliCloud:' + item.key"
|
||||
:hasPermission="
|
||||
'Northbound/AliCloud:' + item.key
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
|
|
@ -110,14 +117,21 @@
|
|||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="i.key === 'view' ? true : 'Northbound/AliCloud:' + i.key"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'Northbound/AliCloud:' + i.key
|
||||
"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ import { getImage } from '@/utils/comm';
|
|||
|
||||
<style lang="less" scoped>
|
||||
.doc {
|
||||
height: 1000px;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<FullPage>
|
||||
<j-card>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="16">
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="left-content">
|
||||
<TitleComponent data="基本信息" />
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
|
|
@ -58,7 +60,9 @@
|
|||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{ item.name }}</j-select-option
|
||||
>{{
|
||||
item.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
|
|
@ -79,14 +83,18 @@
|
|||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择设备类型"
|
||||
v-model:value="modelRef.applianceType"
|
||||
v-model:value="
|
||||
modelRef.applianceType
|
||||
"
|
||||
show-search
|
||||
@change="typeChange"
|
||||
>
|
||||
|
|
@ -95,7 +103,9 @@
|
|||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{ item.name }}</j-select-option
|
||||
>{{
|
||||
item.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
|
|
@ -105,14 +115,18 @@
|
|||
label="产品名称"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="modelRef.productName"
|
||||
v-model:value="
|
||||
modelRef.productName
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<p>动作映射</p>
|
||||
<j-collapse
|
||||
v-if="modelRef.actionMappings.length"
|
||||
v-if="
|
||||
modelRef.actionMappings.length
|
||||
"
|
||||
:activeKey="actionActiveKey"
|
||||
@change="onActionCollChange"
|
||||
>
|
||||
|
|
@ -127,7 +141,8 @@
|
|||
item.action,
|
||||
).find(
|
||||
(i) =>
|
||||
i.id === item.action,
|
||||
i.id ===
|
||||
item.action,
|
||||
)?.name
|
||||
: `动作映射${index + 1}`
|
||||
"
|
||||
|
|
@ -147,7 +162,8 @@
|
|||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择动作',
|
||||
message:
|
||||
'请选择动作',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
|
|
@ -175,8 +191,12 @@
|
|||
'',
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
:label="i.name"
|
||||
:value="
|
||||
i.id
|
||||
"
|
||||
:label="
|
||||
i.name
|
||||
"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
|
|
@ -193,7 +213,8 @@
|
|||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择操作',
|
||||
message:
|
||||
'请选择操作',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
|
|
@ -267,7 +288,10 @@
|
|||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
style="
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
"
|
||||
@click="addItem"
|
||||
>
|
||||
<AIcon
|
||||
|
|
@ -279,7 +303,9 @@
|
|||
<j-col :span="24">
|
||||
<p style="margin-top: 20px">属性映射</p>
|
||||
<j-collapse
|
||||
v-if="modelRef.propertyMappings.length"
|
||||
v-if="
|
||||
modelRef.propertyMappings.length
|
||||
"
|
||||
:activeKey="propertyActiveKey"
|
||||
@change="onPropertyCollChange"
|
||||
>
|
||||
|
|
@ -294,7 +320,8 @@
|
|||
item.source,
|
||||
).find(
|
||||
(i) =>
|
||||
i.id === item.source,
|
||||
i.id ===
|
||||
item.source,
|
||||
)?.name
|
||||
: `属性映射${index + 1}`
|
||||
"
|
||||
|
|
@ -302,7 +329,11 @@
|
|||
<template #extra
|
||||
><AIcon
|
||||
type="DeleteOutlined"
|
||||
@click="delPropertyItem(index)"
|
||||
@click="
|
||||
delPropertyItem(
|
||||
index,
|
||||
)
|
||||
"
|
||||
/></template>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
|
|
@ -332,7 +363,9 @@
|
|||
'',
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
:value="
|
||||
i.id
|
||||
"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
|
|
@ -367,7 +400,9 @@
|
|||
item.target,
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
:value="
|
||||
i.id
|
||||
"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
|
|
@ -385,7 +420,10 @@
|
|||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
style="
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
"
|
||||
@click="addPropertyItem"
|
||||
>
|
||||
<AIcon
|
||||
|
|
@ -404,7 +442,9 @@
|
|||
}"
|
||||
>
|
||||
<j-textarea
|
||||
v-model:value="modelRef.description"
|
||||
v-model:value="
|
||||
modelRef.description
|
||||
"
|
||||
placeholder="请输入说明"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
|
|
@ -426,12 +466,14 @@
|
|||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<Doc />
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</div>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -504,7 +546,7 @@ const onActionTypeChange = (_index: number) => {
|
|||
properties: undefined,
|
||||
functionId: undefined,
|
||||
inputs: [],
|
||||
value: undefined
|
||||
value: undefined,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -721,3 +763,22 @@ watch(
|
|||
{ immediate: true, deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box {
|
||||
position: relative;
|
||||
.left {
|
||||
.left-content {
|
||||
width: 66%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 33%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,11 +5,14 @@
|
|||
target="northbound-dueros"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
|
|
@ -19,7 +22,9 @@
|
|||
@click="handleAdd"
|
||||
hasPermission="Northbound/DuerOS:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
|
|
@ -47,7 +52,9 @@
|
|||
</Ellipsis>
|
||||
<j-row style="margin-top: 15px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">产品</div>
|
||||
<div class="card-item-content-text">
|
||||
产品
|
||||
</div>
|
||||
<Ellipsis>
|
||||
<div>{{ slotProps?.productName }}</div>
|
||||
</Ellipsis>
|
||||
|
|
@ -57,7 +64,9 @@
|
|||
设备类型
|
||||
</div>
|
||||
<Ellipsis>
|
||||
<div>{{ slotProps?.applianceType?.text }}</div>
|
||||
<div>
|
||||
{{ slotProps?.applianceType?.text }}
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
|
@ -113,14 +122,21 @@
|
|||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="i.key === 'view' ? true : 'Northbound/DuerOS:' + i.key"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'Northbound/DuerOS:' + i.key
|
||||
"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<SaveChild
|
||||
v-if="childVisible"
|
||||
@close-child-save="closeChildSave"
|
||||
|
|
@ -10,12 +9,16 @@
|
|||
:columns="columns"
|
||||
target="child-device"
|
||||
@search="handleSearch"
|
||||
class="child-device-search"
|
||||
class="device-child-device-search"
|
||||
/>
|
||||
<!-- <j-divider /> -->
|
||||
<JProTable
|
||||
ref="childDeviceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:bodyStyle="{
|
||||
padding: 0
|
||||
}"
|
||||
:defaultParams="{
|
||||
terms: [
|
||||
{
|
||||
|
|
@ -33,13 +36,12 @@
|
|||
:params="params"
|
||||
:model="'TABLE'"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<template #rightExtraRender>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
v-if="
|
||||
detail?.accessProvider ===
|
||||
'official-edge-gateway'
|
||||
detail?.accessProvider === 'official-edge-gateway'
|
||||
"
|
||||
hasPermission="device/Instance:update"
|
||||
@click="
|
||||
|
|
@ -98,9 +100,7 @@
|
|||
style="padding: 0px"
|
||||
:hasPermission="'device/Instance:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
|
|
@ -108,7 +108,6 @@
|
|||
</JProTable>
|
||||
<BindChildDevice v-if="visible" @change="closeBindDevice" />
|
||||
</div>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -147,10 +146,10 @@ const columns = [
|
|||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
search:{
|
||||
type:'string',
|
||||
defaultTermType: 'eq'
|
||||
}
|
||||
search: {
|
||||
type: 'string',
|
||||
defaultTermType: 'eq',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
|
|
@ -303,12 +302,8 @@ const closeChildSave = () => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.child-device-search {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
:deep(._jtable-body_1eyxz_1 ._jtable-body-header_1eyxz_6) {
|
||||
justify-content: flex-end;
|
||||
<style lang="less">
|
||||
.device-child-device-search {
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<div class="diagnose">
|
||||
<div
|
||||
class="diagnose-header"
|
||||
|
|
@ -9,19 +8,11 @@
|
|||
<div class="diagnose-img">
|
||||
<div
|
||||
v-if="topState === 'loading'"
|
||||
style="
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
"
|
||||
style="width: 100%; height: 100%; position: relative"
|
||||
>
|
||||
<img
|
||||
:src="headerImgMap.get(topState)"
|
||||
style="
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
"
|
||||
style="height: 100%; position: absolute; z-index: 2"
|
||||
/>
|
||||
<img
|
||||
:src="getImage('/diagnose/loading-1.png')"
|
||||
|
|
@ -66,9 +57,7 @@
|
|||
"
|
||||
v-for="item in tabList"
|
||||
:key="item.key"
|
||||
:style="
|
||||
activeKey === item.key ? { ...activeStyle } : {}
|
||||
"
|
||||
:style="activeKey === item.key ? { ...activeStyle } : {}"
|
||||
@click="onTabChange(item.key)"
|
||||
>
|
||||
{{ item.text }}
|
||||
|
|
@ -90,7 +79,6 @@
|
|||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -160,7 +148,7 @@ const countChange = (num: number) => {
|
|||
};
|
||||
|
||||
const init = () => {
|
||||
flag.value = true
|
||||
flag.value = true;
|
||||
activeKey.value = 'status';
|
||||
const provider = instanceStore.current?.accessProvider;
|
||||
if (provider === 'fixed-media' || provider === 'gb28181-2016') {
|
||||
|
|
@ -175,16 +163,16 @@ const init = () => {
|
|||
providerType.value = 'network';
|
||||
}
|
||||
topState.value = 'loading';
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 500)
|
||||
init();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
flag.value = false
|
||||
flag.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<j-spin :spinning="loading" v-if="metadata.properties.length">
|
||||
<j-card>
|
||||
<j-card :bordered="false" style="padding: 0">
|
||||
<template #extra>
|
||||
<j-space>
|
||||
<j-button @click="visible = true">批量映射</j-button>
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
:edgeId="instanceStore.current.parentId"
|
||||
/>
|
||||
</j-spin>
|
||||
<j-card v-else>
|
||||
<j-card v-else :bordered="false" style="padding: 0">
|
||||
<JEmpty description="暂无数据，请配置物模型" style="margin: 10% 0" />
|
||||
</j-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<j-empty
|
||||
v-if="!metadata || (metadata && !metadata.functions.length)"
|
||||
style="margin-top: 50px"
|
||||
|
|
@ -17,7 +16,6 @@
|
|||
</j-tabs>
|
||||
<component :is="tabs[activeKey]" />
|
||||
</template>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<j-descriptions bordered>
|
||||
<template #title>
|
||||
设备信息
|
||||
|
|
@ -84,7 +83,6 @@
|
|||
@close="visible = false"
|
||||
@save="saveBtn"
|
||||
/>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<pro-search
|
||||
:columns="columns"
|
||||
target="device-instance-log"
|
||||
@search="handleSearch"
|
||||
type="simple"
|
||||
class="search"
|
||||
class="device-log-search"
|
||||
/>
|
||||
<JProTable
|
||||
ref="instanceRefLog"
|
||||
|
|
@ -22,9 +21,7 @@
|
|||
<template #timestamp="slotProps">
|
||||
{{
|
||||
slotProps.timestamp
|
||||
? moment(slotProps.timestamp).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
? moment(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss')
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
|
|
@ -45,7 +42,6 @@
|
|||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -125,11 +121,7 @@ const getActions = (
|
|||
onClick: () => {
|
||||
let content = '';
|
||||
try {
|
||||
content = JSON.stringify(
|
||||
JSON.parse(data.content),
|
||||
null,
|
||||
2,
|
||||
);
|
||||
content = JSON.stringify(JSON.parse(data.content), null, 2);
|
||||
} catch (error) {
|
||||
content = data.content;
|
||||
}
|
||||
|
|
@ -139,7 +131,7 @@ const getActions = (
|
|||
content: h(Textarea, {
|
||||
bordered: false,
|
||||
rows: 15,
|
||||
value: content
|
||||
value: content,
|
||||
}),
|
||||
});
|
||||
},
|
||||
|
|
@ -152,8 +144,8 @@ const handleSearch = (_params: any) => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
<style lang="less">
|
||||
.device-log-search {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
|
||||
<template>
|
||||
<j-card>
|
||||
<div>
|
||||
<div class="top">
|
||||
<div class="top-left">
|
||||
|
|
@ -8,15 +7,23 @@
|
|||
<AIcon type="ExclamationCircleOutlined" />
|
||||
<template v-if="topTitle === 'rest'">
|
||||
当前数据解析内容已脱离产品影响，
|
||||
<PermissionButton type="link" hasPermission="device/Instance:update" @click="rest()">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
hasPermission="device/Instance:update"
|
||||
@click="rest()"
|
||||
>
|
||||
重置
|
||||
</PermissionButton>
|
||||
后将继承产品数据解析内容
|
||||
</template>
|
||||
<template v-else>
|
||||
当前数据解析内容继承自产品,
|
||||
<PermissionButton type="link" hasPermission="device/Instance:update" @click="readOnly = false"
|
||||
:style="color">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
hasPermission="device/Instance:update"
|
||||
@click="readOnly = false"
|
||||
:style="color"
|
||||
>
|
||||
修改
|
||||
</PermissionButton>
|
||||
后将脱离产品影响。
|
||||
|
|
@ -25,163 +32,231 @@
|
|||
</div>
|
||||
<div>
|
||||
脚本语言:
|
||||
<j-select :defaultValue="'JavaScript'" style="width: 200px;margin-left: 5px;">
|
||||
<j-select-option value="JavaScript">JavaScript(ECMAScript 5)</j-select-option>
|
||||
<j-select
|
||||
:defaultValue="'JavaScript'"
|
||||
style="width: 200px; margin-left: 5px"
|
||||
>
|
||||
<j-select-option value="JavaScript"
|
||||
>JavaScript(ECMAScript 5)</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
<AIcon type="ExpandOutlined" style="margin-left: 20px;" @click="toggle" />
|
||||
<AIcon
|
||||
type="ExpandOutlined"
|
||||
style="margin-left: 20px"
|
||||
@click="toggle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit" ref="el">
|
||||
<div v-show="readOnly" class="edit-only" @click="() => {
|
||||
<div
|
||||
v-show="readOnly"
|
||||
class="edit-only"
|
||||
@click="
|
||||
() => {
|
||||
message.warning({
|
||||
key: 1,
|
||||
content: () => '请点击上方修改字样,用以编辑脚本',
|
||||
style: {
|
||||
marginTop: '260px'
|
||||
marginTop: '260px',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
}"></div>
|
||||
<j-monaco-editor language="javascript" style="height: 100%;" theme="vs" v-model:modelValue="editorValue" />
|
||||
"
|
||||
></div>
|
||||
<j-monaco-editor
|
||||
language="javascript"
|
||||
style="height: 100%"
|
||||
theme="vs"
|
||||
v-model:modelValue="editorValue"
|
||||
/>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div style="width: 49.5%;">
|
||||
<div style="width: 49.5%">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">模拟输入</div>
|
||||
<div class="bottom-title-topic">
|
||||
<template v-if="instanceStore.current.transport === 'MQTT'">
|
||||
<div style="margin-right: 5px;">Topic:</div>
|
||||
<j-auto-complete placeholder="请输入Topic" style="width: 300px" :options="topicList"
|
||||
:allowClear="true" :filterOption="filterOption" v-model:value="topic" />
|
||||
<template
|
||||
v-if="instanceStore.current.transport === 'MQTT'"
|
||||
>
|
||||
<div style="margin-right: 5px">Topic:</div>
|
||||
<j-auto-complete
|
||||
placeholder="请输入Topic"
|
||||
style="width: 300px"
|
||||
:options="topicList"
|
||||
:allowClear="true"
|
||||
:filterOption="filterOption"
|
||||
v-model:value="topic"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="margin-right: 5px;">URL:</div>
|
||||
<j-input placeholder="请输入URL" v-model:value="url" style="width: 300px"></j-input>
|
||||
<div style="margin-right: 5px">URL:</div>
|
||||
<j-input
|
||||
placeholder="请输入URL"
|
||||
v-model:value="url"
|
||||
style="width: 300px"
|
||||
></j-input>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<j-textarea :rows="5" placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串" style="margin-top: 10px;"
|
||||
v-model:value="simulation" />
|
||||
<j-textarea
|
||||
:rows="5"
|
||||
placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串"
|
||||
style="margin-top: 10px"
|
||||
v-model:value="simulation"
|
||||
/>
|
||||
</div>
|
||||
<div style="width: 49.5%;">
|
||||
<div style="width: 49.5%">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">运行结果</div>
|
||||
</div>
|
||||
<j-textarea :autoSize="{ minRows: 5 }" :style="resStyle" v-model:value="result" />
|
||||
<j-textarea
|
||||
:autoSize="{ minRows: 5 }"
|
||||
:style="resStyle"
|
||||
v-model:value="result"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px;margin-left: 10px;">
|
||||
<PermissionButton type="primary" hasPermission="device/Instance:update" :loading="loading"
|
||||
:disabled="isDisabled" @click="debug()" :tooltip="{
|
||||
<div style="margin-top: 10px; margin-left: 10px">
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
hasPermission="device/Instance:update"
|
||||
:loading="loading"
|
||||
:disabled="isDisabled"
|
||||
@click="debug()"
|
||||
:tooltip="{
|
||||
title: '需输入脚本和模拟数据后再点击',
|
||||
}">
|
||||
}"
|
||||
>
|
||||
调试
|
||||
</PermissionButton>
|
||||
<PermissionButton hasPermission="device/Instance:update" :loading="loading" :disabled="!isTest" @click="save()"
|
||||
:style="{ marginLeft: '10px' }" :tooltip="{
|
||||
<PermissionButton
|
||||
hasPermission="device/Instance:update"
|
||||
:loading="loading"
|
||||
:disabled="!isTest"
|
||||
@click="save()"
|
||||
:style="{ marginLeft: '10px' }"
|
||||
:tooltip="{
|
||||
title: isTest ? '' : '请先调试',
|
||||
}">
|
||||
}"
|
||||
>
|
||||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name="Parsing">
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue'
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue';
|
||||
// import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import {
|
||||
deviceCode,
|
||||
getProtocal,
|
||||
testCode,
|
||||
saveDeviceCode,
|
||||
delDeviceCode
|
||||
} from '@/api/device/instance'
|
||||
delDeviceCode,
|
||||
} from '@/api/device/instance';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import { isBoolean } from 'lodash';
|
||||
|
||||
const defaultValue =
|
||||
'//解码函数\r\nfunction decode(context) {\r\n //原始报文\r\n var buffer = context.payload();\r\n // 转为json\r\n // var json = context.json();\r\n //mqtt 时通过此方法获取topic\r\n // var topic = context.topic();\r\n\r\n // 提取变量\r\n // var topicVars = context.pathVars("/{deviceId}/**",topic)\r\n //温度属性\r\n var temperature = buffer.getShort(3) * 10;\r\n //湿度属性\r\n var humidity = buffer.getShort(6) * 10;\r\n return {\r\n "temperature": temperature,\r\n "humidity": humidity\r\n };\r\n}\r\n';
|
||||
|
||||
const el = ref<HTMLElement | null>(null)
|
||||
const { toggle } = useFullscreen(el)
|
||||
const el = ref<HTMLElement | null>(null);
|
||||
const { toggle } = useFullscreen(el);
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
|
||||
const topTitle = ref<string>('')
|
||||
const readOnly = ref<boolean>(true)
|
||||
const url = ref<string>('')
|
||||
const topic = ref<string>('')
|
||||
const topicList = ref([])
|
||||
const simulation = ref<string>('')
|
||||
const resultValue = ref<any>({})
|
||||
const loading = ref<boolean>(false)
|
||||
const isTest = ref<boolean>(false)
|
||||
const editorValue = ref<string>('')
|
||||
const topTitle = ref<string>('');
|
||||
const readOnly = ref<boolean>(true);
|
||||
const url = ref<string>('');
|
||||
const topic = ref<string>('');
|
||||
const topicList = ref([]);
|
||||
const simulation = ref<string>('');
|
||||
const resultValue = ref<any>({});
|
||||
const loading = ref<boolean>(false);
|
||||
const isTest = ref<boolean>(false);
|
||||
const editorValue = ref<string>('');
|
||||
|
||||
const color = computed(() => ({
|
||||
color: readOnly.value ? '#415ed1' : '#a6a6a6'
|
||||
}))
|
||||
const resStyle = computed(() => (isBoolean(resultValue.value.success) ? {
|
||||
color: readOnly.value ? '#415ed1' : '#a6a6a6',
|
||||
}));
|
||||
const resStyle = computed(() =>
|
||||
isBoolean(resultValue.value.success)
|
||||
? {
|
||||
'margin-top': '10px',
|
||||
'border-color': resultValue.value.success ? 'green' : 'red'
|
||||
} : {
|
||||
'border-color': resultValue.value.success ? 'green' : 'red',
|
||||
}
|
||||
: {
|
||||
'margin-top': '10px',
|
||||
}))
|
||||
const filterOption = (inputValue: any, option: any) => option!.value.indexOf(inputValue) !== -1
|
||||
},
|
||||
);
|
||||
const filterOption = (inputValue: any, option: any) =>
|
||||
option!.value.indexOf(inputValue) !== -1;
|
||||
|
||||
const isDisabled = computed(() => simulation.value === '')
|
||||
const isDisabled = computed(() => simulation.value === '');
|
||||
|
||||
const result = computed(() => resultValue.value.success ? JSON.stringify(resultValue.value.outputs?.[0]) : resultValue.value.reason)
|
||||
const result = computed(() =>
|
||||
resultValue.value.success
|
||||
? JSON.stringify(resultValue.value.outputs?.[0])
|
||||
: resultValue.value.reason,
|
||||
);
|
||||
|
||||
//重置
|
||||
const rest = async () => {
|
||||
const res = await delDeviceCode(instanceStore.current.productId, instanceStore.current.id)
|
||||
const res = await delDeviceCode(
|
||||
instanceStore.current.productId,
|
||||
instanceStore.current.id,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
getDeviceCode();
|
||||
message.success('操作成功')
|
||||
message.success('操作成功');
|
||||
}
|
||||
};
|
||||
//获取topic
|
||||
const getTopic = async () => {
|
||||
const res: any = await getProtocal(instanceStore.current.protocol, instanceStore.current.transport)
|
||||
const res: any = await getProtocal(
|
||||
instanceStore.current.protocol,
|
||||
instanceStore.current.transport,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
const item = res.result.routes?.map((items: any) => ({
|
||||
value: items.topic,
|
||||
}));
|
||||
// setTopicList(item);
|
||||
topicList.value = item
|
||||
topicList.value = item;
|
||||
}
|
||||
};
|
||||
//获取设备解析规则
|
||||
const getDeviceCode = async () => {
|
||||
const res: any = await deviceCode(instanceStore.current.productId, instanceStore.current.id)
|
||||
const res: any = await deviceCode(
|
||||
instanceStore.current.productId,
|
||||
instanceStore.current.id,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
const item = res.result?.configuration?.script ? res.result?.configuration?.script : defaultValue
|
||||
const item = res.result?.configuration?.script
|
||||
? res.result?.configuration?.script
|
||||
: defaultValue;
|
||||
if (res.result?.deviceId) {
|
||||
readOnly.value = false
|
||||
topTitle.value = 'rest'
|
||||
editorValue.value = item
|
||||
readOnly.value = false;
|
||||
topTitle.value = 'rest';
|
||||
editorValue.value = item;
|
||||
} else {
|
||||
readOnly.value = true
|
||||
topTitle.value = 'edit'
|
||||
editorValue.value = item
|
||||
readOnly.value = true;
|
||||
topTitle.value = 'edit';
|
||||
editorValue.value = item;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//调试
|
||||
const test = async (dataTest: any) => {
|
||||
loading.value = true
|
||||
const res = await testCode(dataTest)
|
||||
loading.value = true;
|
||||
const res = await testCode(dataTest);
|
||||
if (res.status === 200) {
|
||||
loading.value = false
|
||||
resultValue.value = res?.result
|
||||
loading.value = false;
|
||||
resultValue.value = res?.result;
|
||||
} else {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -193,15 +268,18 @@ const save = async () => {
|
|||
script: editorValue.value,
|
||||
lang: 'javascript',
|
||||
},
|
||||
}
|
||||
const res = await saveDeviceCode(instanceStore.current.productId, instanceStore.current.id, item)
|
||||
};
|
||||
const res = await saveDeviceCode(
|
||||
instanceStore.current.productId,
|
||||
instanceStore.current.id,
|
||||
item,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
message.success('保存成功');
|
||||
getDeviceCode();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const debug = () => {
|
||||
if (instanceStore.current.transport === 'MQTT') {
|
||||
if (topic.value !== '') {
|
||||
|
|
@ -215,8 +293,8 @@ const debug = () => {
|
|||
},
|
||||
provider: 'jsr223',
|
||||
payload: simulation.value,
|
||||
})
|
||||
isTest.value = true
|
||||
});
|
||||
isTest.value = true;
|
||||
} else {
|
||||
message.error('请输入topic');
|
||||
}
|
||||
|
|
@ -233,19 +311,17 @@ const debug = () => {
|
|||
},
|
||||
payload: simulation.value,
|
||||
});
|
||||
isTest.value = true
|
||||
isTest.value = true;
|
||||
} else {
|
||||
message.error('请输入url');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDeviceCode()
|
||||
getTopic()
|
||||
})
|
||||
|
||||
getDeviceCode();
|
||||
getTopic();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<div class="property-box">
|
||||
<div class="property-box-left">
|
||||
<j-input-search
|
||||
|
|
@ -17,11 +16,7 @@
|
|||
:tabBarStyle="{ width: '200px' }"
|
||||
@change="tabChange"
|
||||
>
|
||||
<j-tab-pane
|
||||
v-for="i in tabList"
|
||||
:key="i.key"
|
||||
:tab="i.tab"
|
||||
/>
|
||||
<j-tab-pane v-for="i in tabList" :key="i.key" :tab="i.tab" />
|
||||
</j-tabs>
|
||||
<JEmpty v-else style="margin: 180px 0" />
|
||||
</div>
|
||||
|
|
@ -31,7 +26,6 @@
|
|||
<JEmpty v-else style="margin: 220px 0" />
|
||||
</div>
|
||||
</div>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -51,28 +45,32 @@ const tabList = ref<{ key: string; tab: string; type: 'property' | 'event' }[]>(
|
|||
],
|
||||
);
|
||||
const type = ref<string>('property');
|
||||
const data = ref<Record<string, any>>({})
|
||||
const data = ref<Record<string, any>>({});
|
||||
const value = ref<string>('');
|
||||
const instanceStore = useInstanceStore()
|
||||
const metadata = JSON.parse(instanceStore.current?.metadata || '{}')
|
||||
const properties = metadata.properties
|
||||
const events = metadata.events
|
||||
const instanceStore = useInstanceStore();
|
||||
const metadata = JSON.parse(instanceStore.current?.metadata || '{}');
|
||||
const properties = metadata.properties;
|
||||
const events = metadata.events;
|
||||
|
||||
watch(() => events, (newVal) => {
|
||||
if(events && newVal.length){
|
||||
watch(
|
||||
() => events,
|
||||
(newVal) => {
|
||||
if (events && newVal.length) {
|
||||
newVal.map((item: any) => {
|
||||
tabList.value.push({
|
||||
...item,
|
||||
key: item.id,
|
||||
tab: item.name,
|
||||
type: 'event',
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const onSearch = () => {
|
||||
const arr = [
|
||||
|
|
@ -87,33 +85,32 @@ const onSearch = () => {
|
|||
key: item.id,
|
||||
tab: item.name,
|
||||
type: 'event',
|
||||
}
|
||||
})
|
||||
]
|
||||
if(value.value){
|
||||
};
|
||||
}),
|
||||
];
|
||||
if (value.value) {
|
||||
const li = arr.filter((i: any) => {
|
||||
return i?.tab.indexOf(value.value) !== -1;
|
||||
})
|
||||
tabList.value = _.cloneDeep(li)
|
||||
});
|
||||
tabList.value = _.cloneDeep(li);
|
||||
} else {
|
||||
tabList.value = _.cloneDeep(arr)
|
||||
tabList.value = _.cloneDeep(arr);
|
||||
}
|
||||
const dt = tabList.value?.[0]
|
||||
const dt = tabList.value?.[0];
|
||||
if (dt) {
|
||||
data.value = dt
|
||||
data.value = dt;
|
||||
type.value = dt.type;
|
||||
} else {
|
||||
type.value = ''
|
||||
type.value = '';
|
||||
}
|
||||
};
|
||||
const tabChange = (key: string) => {
|
||||
const dt = tabList.value.find((i) => i.key === key);
|
||||
if (dt) {
|
||||
data.value = dt
|
||||
data.value = dt;
|
||||
type.value = dt.type;
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<j-spin :spinning="loading" v-if="metadata.properties.length">
|
||||
<j-card>
|
||||
<j-card :bordered="false" borderStyle="padding: 0">
|
||||
<template #extra>
|
||||
<j-space>
|
||||
<j-button @click="visible = true">批量映射</j-button>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
:metaData="modelRef.dataSource"
|
||||
/>
|
||||
</j-spin>
|
||||
<j-card v-else>
|
||||
<j-card v-else :bordered="false" borderStyle="padding: 0">
|
||||
<JEmpty description='暂无数据，请配置物模型' style="margin: 10% 0" />
|
||||
</j-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
<template #title>
|
||||
<div style="display: flex; align-items: center">
|
||||
<j-tooltip :title="instanceStore.current?.name">
|
||||
<div class="deviceDetailHead">{{ instanceStore.current?.name }}</div>
|
||||
<div class="deviceDetailHead">
|
||||
{{ instanceStore.current?.name }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
<j-divider type="vertical" />
|
||||
<j-space>
|
||||
|
|
@ -95,11 +97,15 @@
|
|||
style="margin-right: 20px; cursor: pointer"
|
||||
/>
|
||||
</template>
|
||||
<FullPage>
|
||||
<j-card :bordered="false">
|
||||
<component
|
||||
:is="tabs[instanceStore.tabActiveKey]"
|
||||
v-bind="{ type: 'device' }"
|
||||
@onJump="onTabChange"
|
||||
/>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -121,12 +127,12 @@ import { message } from 'jetlinks-ui-components';
|
|||
import { getImage } from '@/utils/comm';
|
||||
import { getWebSocket } from '@/utils/websocket';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
import {useRouterParams} from "@/utils/hooks/useParams";
|
||||
import { useRouterParams } from '@/utils/hooks/useParams';
|
||||
|
||||
const menuStory = useMenuStore();
|
||||
|
||||
const route = useRoute();
|
||||
const routerParams = useRouterParams()
|
||||
const routerParams = useRouterParams();
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
const statusMap = new Map();
|
||||
|
|
@ -266,7 +272,7 @@ const getDetail = () => {
|
|||
// );
|
||||
|
||||
const getDetailFn = async () => {
|
||||
const _id = route.params?.id
|
||||
const _id = route.params?.id;
|
||||
if (_id) {
|
||||
await instanceStore.refresh(String(_id));
|
||||
getStatus(String(_id));
|
||||
|
|
@ -274,10 +280,10 @@ const getDetailFn = async () => {
|
|||
getDetail();
|
||||
}
|
||||
instanceStore.tabActiveKey = routerParams.params.value.tab || 'Info';
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDetailFn()
|
||||
getDetailFn();
|
||||
});
|
||||
|
||||
const onBack = () => {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,14 @@
|
|||
target="device-instance"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:rowSelection="
|
||||
isCheck
|
||||
? {
|
||||
|
|
@ -27,7 +30,9 @@
|
|||
@click="handleAdd"
|
||||
hasPermission="device/Instance:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<BatchDropdown
|
||||
|
|
@ -159,7 +164,9 @@
|
|||
>
|
||||
<template #img>
|
||||
<img
|
||||
:src="getImage('/device/instance/device-card.png')"
|
||||
:src="
|
||||
getImage('/device/instance/device-card.png')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
|
|
@ -220,7 +227,11 @@
|
|||
</template>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
slotProps?.createTime ? dayjs(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss') : ''
|
||||
slotProps?.createTime
|
||||
? dayjs(slotProps.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
|
|
@ -245,12 +256,15 @@
|
|||
: 'device/Instance:' + i.key
|
||||
"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
<Import
|
||||
v-if="importVisible"
|
||||
|
|
@ -867,7 +881,7 @@ const handleSearch = (_params: any) => {
|
|||
) {
|
||||
return {
|
||||
...item2,
|
||||
column: 'productId$product-info'
|
||||
column: 'productId$product-info',
|
||||
};
|
||||
}
|
||||
return item2;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
target="edge-device"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="edgeDeviceRef"
|
||||
:columns="columns"
|
||||
|
|
@ -20,7 +21,9 @@
|
|||
@click="handleAdd"
|
||||
hasPermission="edge/Device:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
|
|
@ -48,7 +51,9 @@
|
|||
>
|
||||
<template #img>
|
||||
<img
|
||||
:src="getImage('/device/instance/device-card.png')"
|
||||
:src="
|
||||
getImage('/device/instance/device-card.png')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
|
|
@ -112,7 +117,9 @@
|
|||
</template>
|
||||
<template #registryTime="slotProps">
|
||||
<span>{{
|
||||
dayjs(slotProps.registryTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
dayjs(slotProps.registryTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
|
|
@ -131,21 +138,33 @@
|
|||
type="link"
|
||||
style="padding: 0 5px"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="i.key === 'view' ? true : 'edge/Device:' + i.key"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'edge/Device:' + i.key
|
||||
"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<Save
|
||||
v-if="visible"
|
||||
:data="current"
|
||||
@close="visible = false"
|
||||
@save="saveBtn"
|
||||
/>
|
||||
<Import @save="onRefresh" @close="importVisible = false" v-if="importVisible" type="official-edge-gateway" />
|
||||
<Import
|
||||
@save="onRefresh"
|
||||
@close="importVisible = false"
|
||||
v-if="importVisible"
|
||||
type="official-edge-gateway"
|
||||
/>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -192,18 +211,18 @@ const visible = ref<boolean>(false);
|
|||
const current = ref<Record<string, any>>({});
|
||||
|
||||
const transformData = (arr: any[]): any[] => {
|
||||
if(Array.isArray(arr) && arr.length){
|
||||
if (Array.isArray(arr) && arr.length) {
|
||||
return (arr || []).map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
id: `classifiedId is ${item.id}`,
|
||||
children: transformData(item.children)
|
||||
}
|
||||
})
|
||||
children: transformData(item.children),
|
||||
};
|
||||
});
|
||||
} else {
|
||||
return []
|
||||
return [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -471,9 +490,9 @@ const saveBtn = () => {
|
|||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
importVisible.value = false
|
||||
importVisible.value = false;
|
||||
edgeDeviceRef.value?.reload();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
target="edge-resource"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="edgeResourceRef"
|
||||
:columns="columns"
|
||||
|
|
@ -26,7 +27,9 @@
|
|||
>
|
||||
<template #img>
|
||||
<img
|
||||
:src="getImage('/device/instance/device-card.png')"
|
||||
:src="
|
||||
getImage('/device/instance/device-card.png')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
|
|
@ -42,7 +45,8 @@
|
|||
</div>
|
||||
<Ellipsis>{{
|
||||
options.find(
|
||||
(i) => i.value === slotProps.category,
|
||||
(i) =>
|
||||
i.value === slotProps.category,
|
||||
)?.label || slotProps.category
|
||||
}}</Ellipsis>
|
||||
</j-col>
|
||||
|
|
@ -99,7 +103,9 @@
|
|||
</template>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
dayjs(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
dayjs(slotProps.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
|
|
@ -124,12 +130,16 @@
|
|||
: 'edge/Resource:' + i.key
|
||||
"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
|
||||
<Save
|
||||
v-if="visible"
|
||||
:data="current"
|
||||
|
|
|
|||
|
|
@ -278,7 +278,7 @@ watch(
|
|||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ const TypeList = [
|
|||
},
|
||||
{
|
||||
label: '按变量',
|
||||
value: 'variable',
|
||||
value: 'context',
|
||||
image: getImage('/scene/device-variable.png'),
|
||||
tip: '选择设备ID为上游变量值的设备',
|
||||
},
|
||||
|
|
@ -236,7 +236,7 @@ const filterType = async (newVal: any) => {
|
|||
!props.parallel &&
|
||||
props.name !== 0
|
||||
) {
|
||||
const array = TypeList.filter((item) => item.value === 'variable');
|
||||
const array = TypeList.filter((item) => item.value === 'context');
|
||||
_list.push(...array);
|
||||
}
|
||||
list.value = _list;
|
||||
|
|
@ -246,7 +246,7 @@ const filterType = async (newVal: any) => {
|
|||
!props.parallel &&
|
||||
props.name !== 0
|
||||
) {
|
||||
const array = TypeList.filter((item) => item.value === 'variable');
|
||||
const array = TypeList.filter((item) => item.value === 'context');
|
||||
_list.push(...array);
|
||||
}
|
||||
list.value = _list;
|
||||
|
|
@ -287,7 +287,12 @@ const onTagChange = (val: any[], arr: any[]) => {
|
|||
modelRef.source = 'fixed';
|
||||
}
|
||||
const tagName = arr.map((i, _index) => {
|
||||
const _type = (_index !== 0 && _index !== (arr || []).length && i.type) ? (i.type === 'and' ? '并且' : '或者') : '';
|
||||
const _type =
|
||||
_index !== 0 && _index !== (arr || []).length && i.type
|
||||
? i.type === 'and'
|
||||
? '并且'
|
||||
: '或者'
|
||||
: '';
|
||||
return `${_type}${i.name}为${i.value}`;
|
||||
});
|
||||
emits('save', unref(modelRef), { tagName: tagName.join('') });
|
||||
|
|
@ -295,6 +300,8 @@ const onTagChange = (val: any[], arr: any[]) => {
|
|||
|
||||
const onVariableChange = (val: any, node: any) => {
|
||||
modelRef.deviceId = val;
|
||||
modelRef.source = 'upper';
|
||||
modelRef.upperKey = val;
|
||||
modelRef.selectorValues = [{ value: val, name: node.description }] as any;
|
||||
emits('save', unref(modelRef), { name: node.description });
|
||||
};
|
||||
|
|
@ -333,7 +340,7 @@ watch(
|
|||
return item.children.find((i: any) => i.id === param);
|
||||
});
|
||||
if (isVariable) {
|
||||
modelRef.selector = 'variable';
|
||||
modelRef.selector = 'context';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -181,6 +181,7 @@ const onProductChange = (_val: any, bol: boolean) => {
|
|||
JSON.parse(_val.metadata || '{}'),
|
||||
DeviceModel?.message,
|
||||
);
|
||||
console.log(flag)
|
||||
if (!flag) {
|
||||
DeviceModel.message = {
|
||||
messageType: 'INVOKE_FUNCTION',
|
||||
|
|
|
|||
Loading…
Reference in New Issue