update: 优化产品-设备接入
This commit is contained in:
xieyonghong
parent
8cc721b790
commit
4494727311
|
|
@ -131,7 +131,7 @@ export const saveProductMetadata = (data: Record<string, unknown>) => server.pat
|
|||
* @param data 查询条件
|
||||
* @returns
|
||||
*/
|
||||
export const getDeviceNumber = (params:any) => server.get('/device-instance/_count', params)
|
||||
export const getDeviceNumber = (params:any) => server.get<number>('/device-instance/_count', params)
|
||||
|
||||
/**
|
||||
* 获取协议详情
|
||||
|
|
|
|||
|
|
@ -15,15 +15,18 @@ export const useProductStore = defineStore({
|
|||
this.current = current
|
||||
this.detail = current
|
||||
},
|
||||
async refresh(id: string) {
|
||||
async getDetail(id: string) {
|
||||
const resp = await detail(id)
|
||||
const res = await getDeviceNumber(encodeQuery({ terms: { productId: id } }))
|
||||
if(resp.status === 200){
|
||||
this.current = resp.result
|
||||
this.detail = resp.result
|
||||
if(res.status === 200){
|
||||
this.current.count = res.result
|
||||
}
|
||||
}
|
||||
},
|
||||
async refresh(id: string) {
|
||||
this.getDetail(id)
|
||||
const res = await getDeviceNumber(encodeQuery({ terms: { productId: id } }))
|
||||
if(res.status === 200){
|
||||
this.current.count = res.result
|
||||
}
|
||||
},
|
||||
setTabActiveKey(key: string) {
|
||||
|
|
|
|||
|
|
@ -374,6 +374,7 @@ import { Empty, FormItem, message } from 'ant-design-vue';
|
|||
import { getImage } from '@/utils/comm';
|
||||
import Title from '../Title/index.vue';
|
||||
import { usePermissionStore } from '@/store/permission';
|
||||
import { steps, steps1 } from './util'
|
||||
import './index.less';
|
||||
import {
|
||||
getProviders,
|
||||
|
|
@ -412,7 +413,7 @@ const visible = ref<boolean>(false);
|
|||
const listData = ref<string[]>([]);
|
||||
const access = ref({});
|
||||
const config = ref<any>({});
|
||||
const metadata = ref<ConfigMetadata[]>([]);
|
||||
const metadata = ref<ConfigMetadata>({ properties: [] });
|
||||
const dataSource = ref<string[]>([]);
|
||||
const storageList = ref<any[]>([]);
|
||||
const markdownToHtml = shallowRef('');
|
||||
|
|
@ -590,74 +591,7 @@ const search = (e: any) => {
|
|||
};
|
||||
|
||||
const stepsRef = reactive({current:0})
|
||||
//引导页数据
|
||||
const steps = [
|
||||
{
|
||||
element: '#rc-tabs-0-tab-Metadata',
|
||||
popover: {
|
||||
id: 'driver',
|
||||
title: `<div id='title'>配置物模型</div><div id='guide'>1/3</div>`,
|
||||
description: `配置产品物模型，实现设备在云端的功能描述。`,
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '.ant-switch',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>启用产品</div><div id='guide'>2/3</div>`,
|
||||
description: '启用产品后，可在产品下新增设备。',
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '.ant-descriptions-item-label',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>添加设备</div><div id='guide'>3/3</div>`,
|
||||
description: '添加设备，并连接到平台。',
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
];
|
||||
const steps1 = [
|
||||
{
|
||||
element: '.config',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>填写配置</div><div id='guide'>1/4</div>`,
|
||||
description: `填写设备接入所需的配置参数。`,
|
||||
position: 'right',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '#rc-tabs-0-tab-Metadata',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>配置物模型</div><div id='guide'>2/4</div>`,
|
||||
description: `配置产品物模型，实现设备在云端的功能描述。`,
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '.ant-switch',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>启用产品</div><div id='guide'>3/4</div>`,
|
||||
description: '启用产品后，可在产品下新增设备。',
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '.ant-descriptions-item-label',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>添加设备</div><div id='guide'>4/4</div>`,
|
||||
description: '添加设备，并连接到平台。',
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 保存引导页数据
|
||||
*/
|
||||
|
|
@ -870,11 +804,11 @@ const queryAccessDetail = async (id: string) => {
|
|||
/**
|
||||
* 查询协议信息
|
||||
*/
|
||||
const getConfigDetail = async (
|
||||
const getConfigDetail = (
|
||||
messageProtocol: string,
|
||||
transportProtocol: string,
|
||||
) => {
|
||||
const res = await getConfigView(messageProtocol, transportProtocol).then(
|
||||
getConfigView(messageProtocol, transportProtocol).then(
|
||||
(resp) => {
|
||||
if (resp.status === 200) {
|
||||
config.value = resp.result;
|
||||
|
|
@ -965,21 +899,23 @@ const submitData = async () => {
|
|||
obj.metadata = JSON.stringify(mdata);
|
||||
}
|
||||
}
|
||||
// 保存或者更新设备接入
|
||||
const resp: any = obj.id
|
||||
? await updateDevice(obj)
|
||||
: await saveDevice(obj);
|
||||
if (resp.status === 200) {
|
||||
|
||||
detail(productStore.current?.id || '').then((res) => {
|
||||
if (res.status === 200) {
|
||||
productStore.current = { ...res.result };
|
||||
access.value = res.result;
|
||||
message.success('操作成功！');
|
||||
getData();
|
||||
}
|
||||
visible.value = false;
|
||||
queryParams.value = {};
|
||||
|
||||
});
|
||||
getData(obj.accessId);
|
||||
}
|
||||
} else {
|
||||
message.error('请选择接入方式');
|
||||
|
|
@ -995,48 +931,59 @@ const modifyArray = (oldData: any[], newData: any[]) => {
|
|||
return { ...item, sortsIndex: index };
|
||||
});
|
||||
};
|
||||
/**
|
||||
*
|
||||
*/
|
||||
const getGuide = async (isDriver1: boolean = false) => {
|
||||
const res: any = await productGuide();
|
||||
if (res.result && res.result?.content === 'skip') {
|
||||
return;
|
||||
} else {
|
||||
if (isDriver1) {
|
||||
driver1.defineSteps(steps1);
|
||||
driver1.start();
|
||||
} else {
|
||||
driver.defineSteps(steps);
|
||||
driver.start();
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 查询保存数据信息
|
||||
*/
|
||||
const getData = async () => {
|
||||
if (productStore.current?.accessId) {
|
||||
if (productStore.current?.id) {
|
||||
getConfigMetadata(productStore.current?.id).then(
|
||||
async (resp: any) => {
|
||||
metadata.value =
|
||||
(resp?.result[0] as ConfigMetadata[]) || [];
|
||||
const res: any = await productGuide();
|
||||
if (res.result && res.result?.content === 'skip') {
|
||||
return;
|
||||
} else {
|
||||
if (resp.result && resp.result.length > 0) {
|
||||
driver1.defineSteps(steps1);
|
||||
driver1.start();
|
||||
} else {
|
||||
driver.defineSteps(steps);
|
||||
driver.start();
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
queryAccessDetail(productStore.current?.accessId);
|
||||
getConfigDetail(
|
||||
productStore.current?.messageProtocol || '',
|
||||
productStore.current?.transportProtocol || '',
|
||||
);
|
||||
getProviders().then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
dataSource.value = resp.result;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (productStore.current?.id) {
|
||||
getConfigMetadata(productStore.current?.id).then((resp: any) => {
|
||||
metadata.value = resp?.result[0] as ConfigMetadata[];
|
||||
});
|
||||
const getData = async (accessId?: string) => {
|
||||
const _accessId = accessId || productStore.current?.accessId
|
||||
if (productStore.current?.id) {
|
||||
getConfigMetadata(productStore.current?.id).then((resp: any) => {
|
||||
metadata.value = resp?.result[0] as ConfigMetadata || { properties: [] };
|
||||
if (accessId) { // 切换接入方式之后获取是否显示引导
|
||||
getGuide(!resp?.result.length) //
|
||||
}
|
||||
});
|
||||
}
|
||||
if (_accessId) { // 有设备接入
|
||||
// const metadataResp = await getConfigMetadata(productStore.current!.id)
|
||||
// if (metadataResp.success) {
|
||||
// metadata.value = (metadataResp.result?.[0] as ConfigMetadata[]) || [];
|
||||
// }
|
||||
queryAccessDetail(_accessId);
|
||||
getConfigDetail(
|
||||
productStore.current?.messageProtocol || '',
|
||||
productStore.current?.transportProtocol || '',
|
||||
);
|
||||
getProviders().then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
dataSource.value = resp.result;
|
||||
}
|
||||
});
|
||||
}
|
||||
// else {
|
||||
// if (productStore.current?.id) {
|
||||
// getConfigMetadata(productStore.current?.id).then((resp: any) => {
|
||||
// metadata.value = resp?.result[0] as ConfigMetadata[];
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
getStoragList().then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
storageList.value = resp.result;
|
||||
|
|
@ -1092,11 +1039,15 @@ const add = () => {
|
|||
/**
|
||||
* 初始化
|
||||
*/
|
||||
// watchEffect(() => {
|
||||
// if (productStore.current?.accessId) {
|
||||
// getData();
|
||||
// }
|
||||
// });
|
||||
watchEffect(() => {
|
||||
if (productStore.current?.storePolicy) {
|
||||
form.storePolicy = productStore.current!.storePolicy
|
||||
}
|
||||
})
|
||||
|
||||
nextTick(() => {
|
||||
getData();
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
//引导页数据
|
||||
export const steps = [
|
||||
{
|
||||
element: '#rc-tabs-0-tab-Metadata',
|
||||
popover: {
|
||||
id: 'driver',
|
||||
title: `<div id='title'>配置物模型</div><div id='guide'>1/3</div>`,
|
||||
description: `配置产品物模型，实现设备在云端的功能描述。`,
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '.ant-switch',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>启用产品</div><div id='guide'>2/3</div>`,
|
||||
description: '启用产品后，可在产品下新增设备。',
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '.ant-descriptions-item-label',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>添加设备</div><div id='guide'>3/3</div>`,
|
||||
description: '添加设备，并连接到平台。',
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const steps1 = [
|
||||
{
|
||||
element: '.config',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>填写配置</div><div id='guide'>1/4</div>`,
|
||||
description: `填写设备接入所需的配置参数。`,
|
||||
position: 'right',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '#rc-tabs-0-tab-Metadata',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>配置物模型</div><div id='guide'>2/4</div>`,
|
||||
description: `配置产品物模型，实现设备在云端的功能描述。`,
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '.ant-switch',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>启用产品</div><div id='guide'>3/4</div>`,
|
||||
description: '启用产品后，可在产品下新增设备。',
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '.ant-descriptions-item-label',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>添加设备</div><div id='guide'>4/4</div>`,
|
||||
description: '添加设备，并连接到平台。',
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -47,9 +47,9 @@ export type ConfigProperty = {
|
|||
};
|
||||
|
||||
export type ConfigMetadata = {
|
||||
name: string;
|
||||
description: string;
|
||||
scopes: any[];
|
||||
name?: string;
|
||||
description?: string;
|
||||
scopes?: any[];
|
||||
properties: ConfigProperty[];
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue