Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
JiangQiming
commit
95c01fc7eb
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
|
|
@ -0,0 +1,67 @@
|
|||
import server from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 不分页查询平台对接
|
||||
* @param data
|
||||
*/
|
||||
export const queryPlatformNoPage = (data: any) => server.post(`/network/card/platform/_query/no-paging`, data)
|
||||
|
||||
/**
|
||||
* 分页查询物联卡管理列表
|
||||
* @param data
|
||||
*/
|
||||
export const query = (data: any) => server.post(`/network/card/_query`, data)
|
||||
|
||||
/**
|
||||
* 激活待激活物联卡
|
||||
* @param cardId
|
||||
*/
|
||||
export const changeDeploy = (cardId: string) => server.get(`/network/card/${cardId}/_activation`);
|
||||
|
||||
/**
|
||||
* 停用已激活物联卡
|
||||
* @param cardId
|
||||
*/
|
||||
export const unDeploy = (cardId: string) => server.get(`/network/card/${cardId}/_deactivate`);
|
||||
|
||||
/**
|
||||
* 复机已停机物联卡
|
||||
* @param cardId
|
||||
*/
|
||||
export const resumption = (cardId: string) => server.get(`/network/card/${cardId}/_resumption`);
|
||||
|
||||
/**
|
||||
* 删除物联卡
|
||||
* @param id
|
||||
*/
|
||||
export const del = (id: string) => server.remove(`/network/card/${id}`);
|
||||
|
||||
|
||||
/**
|
||||
* 激活待激活物联卡(批量)
|
||||
* @param data
|
||||
*/
|
||||
export const changeDeployBatch = (data: any) => server.get(`/network/card/_activation/_bitch`, data);
|
||||
|
||||
/**
|
||||
* 停用已激活物联卡(批量)
|
||||
* @param data
|
||||
*/
|
||||
export const unDeployBatch = (data: any) => server.get(`/network/card/_deactivate/_bitch`, data);
|
||||
|
||||
/**
|
||||
* 复机已停机物联卡(批量)
|
||||
* @param data
|
||||
*/
|
||||
export const resumptionBatch = (data: any) => server.get(`/network/card/_resumption/_bitch`, data);
|
||||
|
||||
/**
|
||||
* 同步物联卡状态
|
||||
*/
|
||||
export const sync = () => server.get(`/network/card/state/_sync`);
|
||||
|
||||
/**
|
||||
* 批量删除物联卡
|
||||
* @param data
|
||||
*/
|
||||
export const removeCards = (data: any) => server.post(`/network/card/batch/_delete`, data);
|
||||
|
|
@ -29,6 +29,10 @@ const iconKeys = [
|
|||
'UploadOutlined',
|
||||
'PlusCircleOutlined',
|
||||
'QuestionCircleOutlined',
|
||||
'DisconnectOutlined',
|
||||
'LinkOutlined',
|
||||
'PoweroffOutlined',
|
||||
'SwapOutlined',
|
||||
'BugOutlined',
|
||||
'BarsOutlined',
|
||||
'ArrowDownOutlined',
|
||||
|
|
|
|||
|
|
@ -127,6 +127,10 @@ export default [
|
|||
path: '/iot-card/Dashboard',
|
||||
component: () => import('@/views/iot-card/Dashboard/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/iot-card/CardManagement',
|
||||
component: () => import('@/views/iot-card/CardManagement/index.vue')
|
||||
},
|
||||
// 北向输出
|
||||
{
|
||||
path: '/northbound/DuerOS',
|
||||
|
|
|
|||
|
|
@ -55,4 +55,21 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
|
|||
document.body.removeChild(formElement);
|
||||
};
|
||||
// 是否不是community版本
|
||||
export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
|
||||
export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
|
||||
|
||||
|
||||
/**
|
||||
* 生成随机数
|
||||
* @param length
|
||||
* @returns
|
||||
*/
|
||||
export const randomString = (length?: number) => {
|
||||
const tempLength = length || 32;
|
||||
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
|
||||
const maxPos = chars.length;
|
||||
let pwd = '';
|
||||
for (let i = 0; i < tempLength; i += 1) {
|
||||
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
|
||||
}
|
||||
return pwd;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,571 @@
|
|||
<!-- 物联卡管理 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<Search
|
||||
:columns="columns"
|
||||
target="iot-card-management-search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JTable
|
||||
ref="cardManageRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
@cancelSelect="cancelSelect"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</a-button>
|
||||
<a-dropdown>
|
||||
<a-button>
|
||||
批量操作
|
||||
<AIcon type="DownOutlined" />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button @click="exportVisible = true">
|
||||
<AIcon type="ExportOutlined" />
|
||||
批量导出
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button @click="importVisible = true"
|
||||
><AIcon
|
||||
type="ImportOutlined"
|
||||
/>批量导入</a-button
|
||||
>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm
|
||||
@confirm="handleActive"
|
||||
title="确认激活吗？"
|
||||
>
|
||||
<a-button>
|
||||
<AIcon type="CheckCircleOutlined" />
|
||||
批量激活
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm
|
||||
@confirm="handleStop"
|
||||
title="确认停用吗？"
|
||||
>
|
||||
<a-button type="primary" ghost>
|
||||
<AIcon type="StopOutlined" />
|
||||
批量停用
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm
|
||||
@confirm="handleResumption"
|
||||
title="确认复机吗？"
|
||||
>
|
||||
<a-button type="primary" ghost>
|
||||
<AIcon type="PoweroffOutlined" />
|
||||
批量复机
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm
|
||||
@confirm="handleSync"
|
||||
title="确认同步状态吗？"
|
||||
>
|
||||
<a-button type="primary" ghost>
|
||||
<AIcon type="SwapOutlined" />
|
||||
同步状态
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="_selectedRowKeys.length > 0">
|
||||
<a-popconfirm
|
||||
@confirm="handelRemove"
|
||||
title="确认删除吗？"
|
||||
>
|
||||
<a-button>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
批量删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #totalFlow="slotProps">
|
||||
<div>
|
||||
{{
|
||||
slotProps.totalFlow
|
||||
? slotProps.totalFlow.toFixed(2) + ' M'
|
||||
: ''
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template #usedFlow="slotProps">
|
||||
<div>
|
||||
{{
|
||||
slotProps.usedFlow
|
||||
? slotProps.usedFlow.toFixed(2) + ' M'
|
||||
: ''
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template #residualFlow="slotProps">
|
||||
<div>
|
||||
{{
|
||||
slotProps.residualFlow
|
||||
? slotProps.residualFlow.toFixed(2) + ' M'
|
||||
: ''
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template #cardType="slotProps">
|
||||
{{ slotProps.cardType.text }}
|
||||
</template>
|
||||
<template #cardStateType="slotProps">
|
||||
{{ slotProps.cardStateType.text }}
|
||||
</template>
|
||||
<template #activationDate="slotProps">
|
||||
{{
|
||||
slotProps.activationDate
|
||||
? moment(slotProps.activationDate).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
<template #updateTime="slotProps">
|
||||
{{
|
||||
slotProps.updateTime
|
||||
? moment(slotProps.updateTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ActionsType } from '@/components/Table';
|
||||
import moment from 'moment';
|
||||
import {
|
||||
query,
|
||||
queryPlatformNoPage,
|
||||
changeDeploy,
|
||||
unDeploy,
|
||||
resumption,
|
||||
del,
|
||||
changeDeployBatch,
|
||||
unDeployBatch,
|
||||
resumptionBatch,
|
||||
sync,
|
||||
removeCards,
|
||||
} from '@/api/iot-card/cardManagement';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const cardManageRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
const _selectedRowKeys = ref<string[]>([]);
|
||||
const _selectedRow = ref<any[]>([]);
|
||||
const visible = ref<boolean>(false);
|
||||
const exportVisible = ref<boolean>(false);
|
||||
const importVisible = ref<boolean>(false);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '卡号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 300,
|
||||
ellipsis: true,
|
||||
fixed: 'left',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'ICCID',
|
||||
dataIndex: 'iccId',
|
||||
key: 'iccId',
|
||||
ellipsis: true,
|
||||
width: 200,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '绑定设备',
|
||||
dataIndex: 'deviceName',
|
||||
key: 'deviceName',
|
||||
ellipsis: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '平台对接',
|
||||
dataIndex: 'platformConfigName',
|
||||
key: 'platformConfigName',
|
||||
width: 200,
|
||||
search: {
|
||||
rename: 'platformConfigId',
|
||||
type: 'select',
|
||||
options: async () => {
|
||||
return new Promise((resolve) => {
|
||||
queryPlatformNoPage({
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: [{ column: 'state', value: 'enabled' }],
|
||||
}).then((resp: any) => {
|
||||
const list = resp.result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
resolve(list);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '运营商',
|
||||
dataIndex: 'operatorName',
|
||||
key: 'operatorName',
|
||||
width: 120,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '移动', value: '移动' },
|
||||
{ label: '电信', value: '电信' },
|
||||
{ label: '联通', value: '联通' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'cardType',
|
||||
key: 'cardType',
|
||||
scopedSlots: true,
|
||||
width: 120,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '年卡', value: 'year' },
|
||||
{ label: '季卡', value: 'season' },
|
||||
{ label: '月卡', value: 'month' },
|
||||
{ label: '其他', value: 'other' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '总流量',
|
||||
dataIndex: 'totalFlow',
|
||||
width: 120,
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '使用流量',
|
||||
dataIndex: 'usedFlow',
|
||||
width: 120,
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '剩余流量',
|
||||
dataIndex: 'residualFlow',
|
||||
width: 120,
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '激活日期',
|
||||
dataIndex: 'activationDate',
|
||||
key: 'activationDate',
|
||||
scopedSlots: true,
|
||||
width: 200,
|
||||
search: {
|
||||
type: 'date',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
scopedSlots: true,
|
||||
width: 200,
|
||||
search: {
|
||||
type: 'date',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'cardStateType',
|
||||
key: 'cardStateType',
|
||||
width: 180,
|
||||
scopedSlots: true,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '正常', value: 'using' },
|
||||
{ label: '未激活', value: 'toBeActivated' },
|
||||
{ label: '停机', value: 'deactivate' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250,
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
|
||||
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||
if (!data) return [];
|
||||
return [
|
||||
{
|
||||
key: 'edit',
|
||||
text: '编辑',
|
||||
tooltip: {
|
||||
title: '编辑',
|
||||
},
|
||||
icon: 'EditOutlined',
|
||||
},
|
||||
{
|
||||
key: 'view',
|
||||
text: '查看',
|
||||
tooltip: {
|
||||
title: '查看',
|
||||
},
|
||||
icon: 'EyeOutlined',
|
||||
},
|
||||
{
|
||||
key: 'bindDevice',
|
||||
text: data.deviceId ? '解绑设备' : '绑定设备',
|
||||
tooltip: {
|
||||
title: data.deviceId ? '解绑设备' : '绑定设备',
|
||||
},
|
||||
icon: data.deviceId ? 'DisconnectOutlined' : 'LinkOutlined',
|
||||
},
|
||||
{
|
||||
key: 'activation',
|
||||
text:
|
||||
data.cardStateType?.value === 'toBeActivated'
|
||||
? '激活'
|
||||
: data.cardStateType?.value === 'deactivate'
|
||||
? '复机'
|
||||
: '停用',
|
||||
tooltip: {
|
||||
title:
|
||||
data.cardStateType?.value === 'toBeActivated'
|
||||
? '激活'
|
||||
: data.cardStateType?.value === 'deactivate'
|
||||
? '复机'
|
||||
: '停用',
|
||||
},
|
||||
icon:
|
||||
data.cardStateType?.value === 'toBeActivated'
|
||||
? 'CheckCircleOutlined'
|
||||
: data.cardStateType?.value === 'deactivate'
|
||||
? 'PoweroffOutlined'
|
||||
: 'StopOutlined',
|
||||
popConfirm: {
|
||||
title:
|
||||
data.cardStateType?.value === 'toBeActivated'
|
||||
? '确认激活？'
|
||||
: data.cardStateType?.value === 'deactivate'
|
||||
? '确认复机？'
|
||||
: '确认停用?',
|
||||
onConfirm: async () => {
|
||||
if (data.cardStateType?.value === 'toBeActivated') {
|
||||
changeDeploy(data.id).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功');
|
||||
cardManageRef.value?.reload();
|
||||
}
|
||||
});
|
||||
} else if (data.cardStateType?.value === 'deactivate') {
|
||||
resumption(data.id).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功');
|
||||
cardManageRef.value?.reload();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
unDeploy(data.id).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功');
|
||||
cardManageRef.value?.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: '删除',
|
||||
tooltip: {
|
||||
title: '删除',
|
||||
},
|
||||
popConfirm: {
|
||||
title: '确认删除?',
|
||||
onConfirm: async () => {
|
||||
const resp: any = await del(data.id);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
cardManageRef.value?.reload();
|
||||
} else {
|
||||
message.error('操作失败！');
|
||||
}
|
||||
},
|
||||
},
|
||||
icon: 'DeleteOutlined',
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const handleSearch = (params: any) => {
|
||||
console.log(params);
|
||||
params.value = params;
|
||||
};
|
||||
|
||||
const onSelectChange = (keys: string[], rows: []) => {
|
||||
_selectedRowKeys.value = [...keys];
|
||||
_selectedRow.value = [...rows];
|
||||
};
|
||||
|
||||
const cancelSelect = () => {
|
||||
_selectedRowKeys.value = [];
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
const handleAdd = () => {};
|
||||
|
||||
/**
|
||||
* 批量激活
|
||||
*/
|
||||
const handleActive = () => {
|
||||
if (
|
||||
_selectedRowKeys.value.length >= 10 &&
|
||||
_selectedRowKeys.value.length <= 100
|
||||
) {
|
||||
changeDeployBatch(_selectedRowKeys.value).then((res: any) => {
|
||||
if (res.status === 200) {
|
||||
message.success('操作成功');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量停用
|
||||
*/
|
||||
const handleStop = () => {
|
||||
if (
|
||||
_selectedRowKeys.value.length >= 10 &&
|
||||
_selectedRowKeys.value.length <= 100
|
||||
) {
|
||||
unDeployBatch(_selectedRowKeys.value).then((res: any) => {
|
||||
if (res.status === 200) {
|
||||
message.success('操作成功');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量复机
|
||||
*/
|
||||
const handleResumption = () => {
|
||||
if (
|
||||
_selectedRowKeys.value.length >= 10 &&
|
||||
_selectedRowKeys.value.length <= 100
|
||||
) {
|
||||
resumptionBatch(_selectedRowKeys.value).then((res: any) => {
|
||||
if (res.status === 200) {
|
||||
message.success('操作成功');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 同步状态
|
||||
*/
|
||||
const handleSync = () => {
|
||||
sync().then((res: any) => {
|
||||
if (res.status === 200) {
|
||||
cardManageRef.value?.reload();
|
||||
message.success('同步状态成功');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量删除
|
||||
*/
|
||||
const handelRemove = async () => {
|
||||
const resp = await removeCards(_selectedRow.value);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
_selectedRowKeys.value = [];
|
||||
_selectedRow.value = [];
|
||||
cardManageRef.value?.reload();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.search {
|
||||
width: calc(100% - 330px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,6 +17,11 @@
|
|||
<Media v-if="showType === 'media'" :provider="provider" />
|
||||
<Channel v-if="showType === 'channel'" :provider="provider" />
|
||||
<Edge v-if="showType === 'edge'" :provider="provider" />
|
||||
<Cloud
|
||||
v-if="showType === 'cloud'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
|
|
@ -30,6 +35,7 @@ import { getProviders, detail } from '@/api/link/accessConfig';
|
|||
import Media from '../components/Media/index.vue';
|
||||
import Channel from '../components/Channel/index.vue';
|
||||
import Edge from '../components/Edge/index.vue';
|
||||
import Cloud from '../components/Cloud/index.vue';
|
||||
|
||||
// const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,624 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<a-steps class="steps-steps" :current="stepCurrent">
|
||||
<a-step v-for="item in steps" :key="item" :title="item" />
|
||||
</a-steps>
|
||||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 0">
|
||||
<div class="alert">
|
||||
<info-circle-outlined />
|
||||
通过CTWing平台的HTTP推送服务进行数据接入
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="16">
|
||||
<a-form
|
||||
:model="formState"
|
||||
ref="formRef1"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="接口地址"
|
||||
name="apiAddress"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
disabled
|
||||
v-model:value="
|
||||
formState.apiAddress
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="appKey"
|
||||
name="appKey"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入appKey',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message:
|
||||
'最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formState.appKey"
|
||||
placeholder="请输入appKey"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="appSecret"
|
||||
name="appSecret"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入appSecret',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message:
|
||||
'最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formState.appSecret
|
||||
"
|
||||
placeholder="请输入appSecret"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12"> </a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
label="说明"
|
||||
name="description"
|
||||
>
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="
|
||||
formState.description
|
||||
"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row> </a-form
|
||||
></a-col>
|
||||
<a-col :span="8">
|
||||
<div class="doc">
|
||||
<h1>操作指引：</h1>
|
||||
<div>
|
||||
1、CTWing端创建产品、设备，以及一个第三方应用
|
||||
</div>
|
||||
<div>
|
||||
2、CTWing端配置产品/设备/分组级订阅，订阅方URL地址请填写:
|
||||
<div style="word-wrap: break-word">
|
||||
{{
|
||||
`${origin}/api/ctwing/${randomString()}/notify`
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img1" />
|
||||
</div>
|
||||
<div>
|
||||
3、IOT端创建类型为CTWing的设备接入网关
|
||||
</div>
|
||||
<div>
|
||||
4、IOT端创建产品，选中接入方式为CTWing,填写CTWing平台中的产品ID、Master-APIkey。
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img2" />
|
||||
</div>
|
||||
<div>
|
||||
5、IOT端添加设备，为每一台设备设置唯一的IMEI（需与CTWing平台中填写的值一致）
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img3" />
|
||||
</div>
|
||||
<h1>设备接入网关配置说明</h1>
|
||||
<div>
|
||||
1.请将CTWing的AEP平台-应用管理中的App
|
||||
Key和App Secret复制到当前页面
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img4" />
|
||||
</div>
|
||||
<h1>其他说明</h1>
|
||||
<div>
|
||||
1.在IOT端启用设备时，若CTWing平台没有与之对应的设备，则将在CTWing端自动创建新设备
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 1">
|
||||
<div class="alert">
|
||||
<info-circle-outlined />
|
||||
只能选择HTTP通信方式的协议
|
||||
</div>
|
||||
<div class="search">
|
||||
<a-input-search
|
||||
allowClear
|
||||
placeholder="请输入"
|
||||
style="width: 300px"
|
||||
@search="procotolSearch"
|
||||
/>
|
||||
<a-button type="primary" @click="addProcotol"
|
||||
>新增</a-button
|
||||
>
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||
<a-col
|
||||
:span="8"
|
||||
v-for="item in procotolList"
|
||||
:key="item.id"
|
||||
>
|
||||
<access-card
|
||||
@checkedChange="procotolChange"
|
||||
:checked="procotolCurrent"
|
||||
:data="item"
|
||||
>
|
||||
</access-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-empty v-else description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="current === 2" class="card-last">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<a-form
|
||||
:model="form"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
ref="formRef2"
|
||||
>
|
||||
<a-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="form.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="config-right">
|
||||
<div class="config-right-item">
|
||||
<title-component data="配置概览" />
|
||||
<div class="config-right-item-context">
|
||||
接入方式：{{ provider.name }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
{{ provider.description }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
消息协议：{{ procotolCurrent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-right-item">
|
||||
<title-component data="设备接入指引" />
|
||||
<div class="config-right-item-context">
|
||||
1、创建类型为{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing'
|
||||
}}的设备接入网关
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
2、创建产品，并选中接入方式为
|
||||
{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
|
||||
}}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
3、添加设备，为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中填写的值一致，若OneNet平台没有对应的设备，将会通过OneNet平台提供的LWM2M协议自动创建）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
|
||||
<a-button
|
||||
v-if="[0, 1].includes(current)"
|
||||
type="primary"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
<a-button v-if="current === 2" type="primary" @click="saveData">
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||
上一步
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="AccessCloudCtwing">
|
||||
import { message, Form } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { update, save, getNetworkList } from '@/api/link/accessConfig';
|
||||
import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
|
||||
import { InfoCircleOutlined } from '@ant-design/icons-vue';
|
||||
import AccessCard from '../AccessCard/index.vue';
|
||||
import { randomString } from '@/utils/utils';
|
||||
import { getImage } from '@/utils/comm';
|
||||
|
||||
const origin = window.location.origin;
|
||||
const img1 = getImage('/network/01.png');
|
||||
const img2 = getImage('/network/02.jpg');
|
||||
const img3 = getImage('/network/03.png');
|
||||
const img4 = getImage('/network/04.jpg');
|
||||
|
||||
//测试数据1{
|
||||
const resultList1 = [
|
||||
{
|
||||
id: '1612354213444087808',
|
||||
name: '大华烟感协议',
|
||||
},
|
||||
{
|
||||
id: '1610475299002855424',
|
||||
name: '宇视摄像头协议',
|
||||
},
|
||||
{
|
||||
id: '1610466717670780928',
|
||||
name: '官方协议',
|
||||
},
|
||||
{
|
||||
id: '1610205217785524224',
|
||||
name: 'demo协议',
|
||||
},
|
||||
{
|
||||
id: '1610204985806958592',
|
||||
name: '水压协议',
|
||||
},
|
||||
{
|
||||
id: '1605459961693745152',
|
||||
name: '测试设备诊断日志显示',
|
||||
},
|
||||
{
|
||||
id: '1582302200020783104',
|
||||
name: 'demo',
|
||||
},
|
||||
{
|
||||
id: '1581839391887794176',
|
||||
name: '海康闸机协议',
|
||||
},
|
||||
{
|
||||
id: '1567062365030637568',
|
||||
name: '协议20220906160914',
|
||||
},
|
||||
{
|
||||
id: '1561650927208628224',
|
||||
name: 'local',
|
||||
},
|
||||
{
|
||||
id: '1552881998413754368',
|
||||
name: '官方协议V3-支持固件升级3',
|
||||
},
|
||||
{
|
||||
id: '2b283b28a16d61e5fc2bdf39ceff34f8',
|
||||
name: 'JetLinks官方协议',
|
||||
description: 'JetLinks官方协议包',
|
||||
},
|
||||
{
|
||||
id: '1551510679466844160',
|
||||
name: '官方协议3.1',
|
||||
},
|
||||
{
|
||||
id: '1551509716811161600',
|
||||
name: '官方协议3.0',
|
||||
},
|
||||
];
|
||||
|
||||
interface FormState {
|
||||
apiAddress: string;
|
||||
appKey: string;
|
||||
appSecret: string;
|
||||
description: string;
|
||||
}
|
||||
interface Form {
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const channel = ref(props.provider.channel);
|
||||
const formRef1 = ref<FormInstance>();
|
||||
const formRef2 = ref<FormInstance>();
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
apiAddress: 'https://ag-api.ctwing.cn/',
|
||||
appKey: '',
|
||||
appSecret: '',
|
||||
description: '',
|
||||
});
|
||||
const form = reactive<Form>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
const current = ref(0);
|
||||
const stepCurrent = ref(0);
|
||||
const steps = ref(['接入配置', '消息协议', '完成']);
|
||||
const procotolList = ref([]);
|
||||
const allProcotolList = ref([]);
|
||||
const procotolCurrent = ref('');
|
||||
|
||||
const procotolChange = (id: string) => {
|
||||
if (!props.data?.id) {
|
||||
procotolCurrent.value = id;
|
||||
}
|
||||
};
|
||||
|
||||
const procotolSearch = (value: string) => {
|
||||
if (value) {
|
||||
const list = allProcotolList.value.filter((i) => {
|
||||
return (
|
||||
i.name &&
|
||||
i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
|
||||
);
|
||||
});
|
||||
procotolList.value = list;
|
||||
} else {
|
||||
procotolList.value = allProcotolList.value;
|
||||
}
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
const data: any = await formRef2.value?.validate();
|
||||
const params = {
|
||||
...data,
|
||||
configuration: {
|
||||
...formState,
|
||||
protocol: procotolCurrent.value,
|
||||
},
|
||||
protocol: procotolCurrent.value,
|
||||
provider: props.provider.id,
|
||||
transport: 'HTTP_SERVER',
|
||||
};
|
||||
const resp =
|
||||
props.data && props.data.id
|
||||
? await update({
|
||||
...props.data,
|
||||
...params,
|
||||
})
|
||||
: await save(params);
|
||||
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
// 回到列表页面
|
||||
// if (window.onTabSaveSuccess) {
|
||||
// window.onTabSaveSuccess(resp);
|
||||
// setTimeout(() => window.close(), 300);
|
||||
// } else {
|
||||
// // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
|
||||
// }
|
||||
history.back();
|
||||
}
|
||||
// onFinish(data);
|
||||
};
|
||||
|
||||
const queryProcotolList = async (id: string, params = {}) => {
|
||||
// const resp = await getProtocolList(ProtocolMapping.get(id), {
|
||||
// ...params,
|
||||
// 'sorts[0].name': 'createTime',
|
||||
// 'sorts[0].order': 'desc',
|
||||
// });
|
||||
// if (resp.status === 200) {
|
||||
// procotolList.value = resp.result;
|
||||
// allProcotolList.value = resp.result;
|
||||
// }
|
||||
|
||||
//使用测试数据1
|
||||
procotolList.value = resultList1;
|
||||
allProcotolList.value = resultList1;
|
||||
};
|
||||
|
||||
const addProcotol = () => {
|
||||
// const url = this.$store.state.permission.routes['Link/Protocol']
|
||||
const url = '/demo';
|
||||
const tab = window.open(
|
||||
`${window.location.origin + window.location.pathname}#${url}?save=true`,
|
||||
);
|
||||
tab.onTabSaveSuccess = (value) => {
|
||||
if (value.success) {
|
||||
procotolCurrent.value = value.result?.id;
|
||||
queryProcotolList(props.provider?.id);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const next = async () => {
|
||||
if (current.value === 0) {
|
||||
let data1: any = await formRef1.value?.validate();
|
||||
queryProcotolList(props.provider.id);
|
||||
current.value = current.value + 1;
|
||||
} else if (current.value === 1) {
|
||||
if (!procotolCurrent.value) {
|
||||
message.error('请选择消息协议！');
|
||||
} else {
|
||||
current.value = current.value + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
const prev = () => {
|
||||
current.value = current.value - 1;
|
||||
};
|
||||
|
||||
watch(
|
||||
current,
|
||||
(v) => {
|
||||
stepCurrent.value = v;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin: 20px;
|
||||
}
|
||||
.steps-box {
|
||||
min-height: 400px;
|
||||
.card-item {
|
||||
padding-right: 5px;
|
||||
max-height: 480px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-action {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.steps-action-save {
|
||||
margin-left: 0;
|
||||
}
|
||||
.alert {
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
line-height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
margin: 15px 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.config-right {
|
||||
padding: 20px;
|
||||
// color: rgba(0, 0, 0, 0.8);
|
||||
// background: rgba(0, 0, 0, 0.04);
|
||||
|
||||
.config-right-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.config-right-item-title {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.config-right-item-context {
|
||||
margin: 5px 0;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc {
|
||||
height: 550px;
|
||||
padding: 24px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
font-size: 14px;
|
||||
background-color: #fafafa;
|
||||
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: rgba(#000, 0.85);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,736 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<a-steps class="steps-steps" :current="stepCurrent">
|
||||
<a-step v-for="item in steps" :key="item" :title="item" />
|
||||
</a-steps>
|
||||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 0">
|
||||
<div class="alert">
|
||||
<info-circle-outlined />
|
||||
通过OneNet平台的HTTP推送服务进行数据接入
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="16">
|
||||
<a-form
|
||||
:model="formState"
|
||||
ref="formRef1"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
name="apiAddress"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label">
|
||||
接口地址
|
||||
<span
|
||||
class="form-label-required"
|
||||
>*</span
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
<p>
|
||||
同步物联网平台设备数据到OneNet
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-input
|
||||
disabled
|
||||
v-model:value="
|
||||
formState.apiAddress
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
label="apiKey"
|
||||
name="apiKey"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入apiKey',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message:
|
||||
'最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formState.apiKey"
|
||||
placeholder="请输入apiKey"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
name="validateToken"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入通知Token',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message:
|
||||
'最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label">
|
||||
通知Token
|
||||
<span
|
||||
class="form-label-required"
|
||||
>*</span
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
<p>
|
||||
接收OneNet推送的Token地址
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formState.validateToken
|
||||
"
|
||||
placeholder="请输入通知Token"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
name="aesKey"
|
||||
:rules="[
|
||||
{
|
||||
max: 64,
|
||||
message:
|
||||
'最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label">
|
||||
aesKey
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
<p>
|
||||
OneNet
|
||||
端生成的消息加密key
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-input
|
||||
v-model:value="formState.aesKey"
|
||||
placeholder="请输入aesKey"
|
||||
/> </a-form-item
|
||||
></a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
label="说明"
|
||||
name="description"
|
||||
>
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="
|
||||
formState.description
|
||||
"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row> </a-form
|
||||
></a-col>
|
||||
<a-col :span="8">
|
||||
<div class="doc">
|
||||
<h1>操作指引：</h1>
|
||||
<div>
|
||||
1、OneNet端创建产品、设备，并配置HTTP推送
|
||||
</div>
|
||||
<div>
|
||||
2、IOT端创建类型为OneNet的设备接入网关
|
||||
</div>
|
||||
<div>
|
||||
3、IOT端创建产品，选中接入方式为OneNet类型的设备接入网关，填写Master-APIkey（OneNet端的产品Key）
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img5" />
|
||||
</div>
|
||||
<div>
|
||||
4、IOT端添加设备，在设备实例页面为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中的值一致）
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img6" />
|
||||
</div>
|
||||
<h1>HTTP推送配置说明</h1>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img" />
|
||||
</div>
|
||||
<div>
|
||||
HTTP推送配置路径：应用开发>数据推送
|
||||
</div>
|
||||
<a-descriptions
|
||||
bordered
|
||||
size="small"
|
||||
:column="1"
|
||||
:labelStyle="{ width: '100px' }"
|
||||
>
|
||||
<a-descriptions-item label="参数"
|
||||
>说明</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item label="实例名称"
|
||||
>推送实例的名称</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item label="推送地址">
|
||||
用于接收OneNet推送设备数据的地址物联网平台地址:
|
||||
<div style="word-wrap: break-word">
|
||||
{{
|
||||
`${origin}/api/one-net/${randomString()}/notify`
|
||||
}}
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="Token">
|
||||
自定义token,可用于验证请求是否来自OneNet
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="消息加密">
|
||||
采用AES加密算法对推送的数据进行数据加密，AesKey为加密秘钥
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<h1>设备接入网关配置说明</h1>
|
||||
<a-descriptions
|
||||
bordered
|
||||
size="small"
|
||||
:column="1"
|
||||
:labelStyle="{ width: '100px' }"
|
||||
>
|
||||
<a-descriptions-item label="参数"
|
||||
>说明</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item label="apiKey"
|
||||
>OneNet平台中具体产品的Key</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item label="通知Token">
|
||||
填写OneNet数据推送配置中设置的Token
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="aesKey">
|
||||
若OneNet数据推送配置了消息加密，此处填写OneNet端数据推送配置中设置的aesKey
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<h1>其他说明</h1>
|
||||
<div>
|
||||
1.在IOT端启用设备时，若OneNet平台没有与之对应的设备，则将在OneNet端自动创建新设备
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 1">
|
||||
<div class="alert">
|
||||
<info-circle-outlined />
|
||||
只能选择HTTP通信方式的协议
|
||||
</div>
|
||||
<div class="search">
|
||||
<a-input-search
|
||||
allowClear
|
||||
placeholder="请输入"
|
||||
style="width: 300px"
|
||||
@search="procotolSearch"
|
||||
/>
|
||||
<a-button type="primary" @click="addProcotol"
|
||||
>新增</a-button
|
||||
>
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||
<a-col
|
||||
:span="8"
|
||||
v-for="item in procotolList"
|
||||
:key="item.id"
|
||||
>
|
||||
<access-card
|
||||
@checkedChange="procotolChange"
|
||||
:checked="procotolCurrent"
|
||||
:data="item"
|
||||
>
|
||||
</access-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-empty v-else description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="current === 2" class="card-last">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<a-form
|
||||
:model="form"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
ref="formRef2"
|
||||
>
|
||||
<a-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="form.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item>
|
||||
<a-button
|
||||
v-if="current !== 1"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
>保存</a-button
|
||||
>
|
||||
</a-form-item> -->
|
||||
</a-form>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="config-right">
|
||||
<div class="config-right-item">
|
||||
<title-component data="配置概览" />
|
||||
<div class="config-right-item-context">
|
||||
接入方式：{{ provider.name }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
{{ provider.description }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
消息协议：{{ procotolCurrent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-right-item">
|
||||
<title-component data="设备接入指引" />
|
||||
<div class="config-right-item-context">
|
||||
1、创建类型为{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing'
|
||||
}}的设备接入网关
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
2、创建产品，并选中接入方式为
|
||||
{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
|
||||
}}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
3、添加设备，为每一台设备设置唯一的IMEI、SN、IMSI、PSK码（需与CTWingt平台中填写的值一致，若CTWing平台没有对应的设备，将会通过CTWing平台提供的LWM2M协议自动创建）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
|
||||
<a-button
|
||||
v-if="[0, 1].includes(current)"
|
||||
type="primary"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
<a-button v-if="current === 2" type="primary" @click="saveData">
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||
上一步
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="AccessCloudOneNet">
|
||||
import { message, Form } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { update, save, getNetworkList } from '@/api/link/accessConfig';
|
||||
import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
|
||||
import {
|
||||
InfoCircleOutlined,
|
||||
QuestionCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import AccessCard from '../AccessCard/index.vue';
|
||||
import { randomString } from '@/utils/utils';
|
||||
import { getImage } from '@/utils/comm';
|
||||
|
||||
const origin = window.location.origin;
|
||||
const img5 = getImage('/network/05.jpg');
|
||||
const img6 = getImage('/network/06.jpg');
|
||||
const img = getImage('/network/OneNet.jpg');
|
||||
|
||||
//测试数据1{
|
||||
const resultList1 = [
|
||||
{
|
||||
id: '1612354213444087808',
|
||||
name: '大华烟感协议',
|
||||
},
|
||||
{
|
||||
id: '1610475299002855424',
|
||||
name: '宇视摄像头协议',
|
||||
},
|
||||
{
|
||||
id: '1610466717670780928',
|
||||
name: '官方协议',
|
||||
},
|
||||
{
|
||||
id: '1610205217785524224',
|
||||
name: 'demo协议',
|
||||
},
|
||||
{
|
||||
id: '1610204985806958592',
|
||||
name: '水压协议',
|
||||
},
|
||||
{
|
||||
id: '1605459961693745152',
|
||||
name: '测试设备诊断日志显示',
|
||||
},
|
||||
{
|
||||
id: '1582302200020783104',
|
||||
name: 'demo',
|
||||
},
|
||||
{
|
||||
id: '1581839391887794176',
|
||||
name: '海康闸机协议',
|
||||
},
|
||||
{
|
||||
id: '1567062365030637568',
|
||||
name: '协议20220906160914',
|
||||
},
|
||||
{
|
||||
id: '1561650927208628224',
|
||||
name: 'local',
|
||||
},
|
||||
{
|
||||
id: '1552881998413754368',
|
||||
name: '官方协议V3-支持固件升级3',
|
||||
},
|
||||
{
|
||||
id: '2b283b28a16d61e5fc2bdf39ceff34f8',
|
||||
name: 'JetLinks官方协议',
|
||||
description: 'JetLinks官方协议包',
|
||||
},
|
||||
{
|
||||
id: '1551510679466844160',
|
||||
name: '官方协议3.1',
|
||||
},
|
||||
{
|
||||
id: '1551509716811161600',
|
||||
name: '官方协议3.0',
|
||||
},
|
||||
];
|
||||
|
||||
interface FormState {
|
||||
apiAddress: string;
|
||||
apiKey: string;
|
||||
validateToken: string;
|
||||
aesKey: string;
|
||||
description: string;
|
||||
}
|
||||
interface Form {
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const channel = ref(props.provider.channel);
|
||||
const formRef1 = ref<FormInstance>();
|
||||
const formRef2 = ref<FormInstance>();
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
apiAddress: 'https://api.heclouds.com/',
|
||||
apiKey: '',
|
||||
validateToken: '',
|
||||
aesKey: '',
|
||||
description: '',
|
||||
});
|
||||
const form = reactive<Form>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
const current = ref(0);
|
||||
const stepCurrent = ref(0);
|
||||
const steps = ref(['接入配置', '消息协议', '完成']);
|
||||
const procotolList = ref([]);
|
||||
const allProcotolList = ref([]);
|
||||
const procotolCurrent = ref('');
|
||||
|
||||
const procotolChange = (id: string) => {
|
||||
if (!props.data?.id) {
|
||||
procotolCurrent.value = id;
|
||||
}
|
||||
};
|
||||
|
||||
const procotolSearch = (value: string) => {
|
||||
if (value) {
|
||||
const list = allProcotolList.value.filter((i) => {
|
||||
return (
|
||||
i.name &&
|
||||
i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
|
||||
);
|
||||
});
|
||||
procotolList.value = list;
|
||||
} else {
|
||||
procotolList.value = allProcotolList.value;
|
||||
}
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
const data: any = await formRef2.value?.validate();
|
||||
const params = {
|
||||
...data,
|
||||
configuration: {
|
||||
...formState,
|
||||
protocol: procotolCurrent.value,
|
||||
},
|
||||
protocol: procotolCurrent.value,
|
||||
provider: props.provider.id,
|
||||
transport: 'HTTP_SERVER',
|
||||
};
|
||||
const resp =
|
||||
props.data && props.data.id
|
||||
? await update({
|
||||
...props.data,
|
||||
...params,
|
||||
})
|
||||
: await save(params);
|
||||
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
// 回到列表页面
|
||||
// if (window.onTabSaveSuccess) {
|
||||
// window.onTabSaveSuccess(resp);
|
||||
// setTimeout(() => window.close(), 300);
|
||||
// } else {
|
||||
// // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
|
||||
// }
|
||||
history.back();
|
||||
}
|
||||
};
|
||||
|
||||
const queryProcotolList = async (id: string, params = {}) => {
|
||||
// const resp = await getProtocolList(ProtocolMapping.get(id), {
|
||||
// ...params,
|
||||
// 'sorts[0].name': 'createTime',
|
||||
// 'sorts[0].order': 'desc',
|
||||
// });
|
||||
// if (resp.status === 200) {
|
||||
// procotolList.value = resp.result;
|
||||
// allProcotolList.value = resp.result;
|
||||
// }
|
||||
|
||||
//使用测试数据1
|
||||
procotolList.value = resultList1;
|
||||
allProcotolList.value = resultList1;
|
||||
};
|
||||
|
||||
const addProcotol = () => {
|
||||
// const url = this.$store.state.permission.routes['Link/Protocol']
|
||||
const url = '/demo';
|
||||
const tab = window.open(
|
||||
`${window.location.origin + window.location.pathname}#${url}?save=true`,
|
||||
);
|
||||
tab.onTabSaveSuccess = (value) => {
|
||||
if (value.success) {
|
||||
procotolCurrent.value = value.result?.id;
|
||||
queryProcotolList(props.provider?.id);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const next = async () => {
|
||||
if (current.value === 0) {
|
||||
let data1: any = await formRef1.value?.validate();
|
||||
queryProcotolList(props.provider.id);
|
||||
current.value = current.value + 1;
|
||||
} else if (current.value === 1) {
|
||||
if (!procotolCurrent.value) {
|
||||
message.error('请选择消息协议！');
|
||||
} else {
|
||||
current.value = current.value + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
const prev = () => {
|
||||
current.value = current.value - 1;
|
||||
};
|
||||
|
||||
watch(
|
||||
current,
|
||||
(v) => {
|
||||
stepCurrent.value = v;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin: 20px;
|
||||
}
|
||||
.steps-box {
|
||||
min-height: 400px;
|
||||
.card-item {
|
||||
padding-right: 5px;
|
||||
max-height: 480px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-action {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.steps-action-save {
|
||||
margin-left: 0;
|
||||
}
|
||||
.alert {
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
line-height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
margin: 15px 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.config-right {
|
||||
padding: 20px;
|
||||
// color: rgba(0, 0, 0, 0.8);
|
||||
// background: rgba(0, 0, 0, 0.04);
|
||||
|
||||
.config-right-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.config-right-item-title {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.config-right-item-context {
|
||||
margin: 5px 0;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc {
|
||||
height: 550px;
|
||||
padding: 24px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
font-size: 14px;
|
||||
background-color: #fafafa;
|
||||
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: rgba(#000, 0.85);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
.form-label {
|
||||
height: 30px;
|
||||
padding-bottom: 8px;
|
||||
.form-label-required {
|
||||
color: red;
|
||||
margin: 0 4px 0 -2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<Ctwing
|
||||
v-if="channel === 'Ctwing'"
|
||||
:provider="props.provider"
|
||||
:data="props.data"
|
||||
/>
|
||||
<OneNet
|
||||
v-if="channel === 'OneNet'"
|
||||
:provider="props.provider"
|
||||
:data="props.data"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="AccessCloud">
|
||||
import Ctwing from './Ctwing.vue';
|
||||
import OneNet from './OneNet.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const channel = props.provider.channel;
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 0">
|
||||
<div class="alert">
|
||||
<question-circle-outlined />
|
||||
<info-circle-outlined />
|
||||
配置设备信令参数
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -511,7 +511,12 @@
|
|||
import { message, Form } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { getResourcesCurrent, getClusters } from '@/api/link/accessConfig';
|
||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
QuestionCircleOutlined,
|
||||
InfoCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { update, save } from '@/api/link/accessConfig';
|
||||
|
||||
interface Form2 {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 0">
|
||||
<div class="alert">
|
||||
<question-circle-outlined />
|
||||
<info-circle-outlined />
|
||||
选择与设备通信的网络组件
|
||||
</div>
|
||||
<div class="search">
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
</div>
|
||||
<div class="steps-box" v-else-if="current === 1">
|
||||
<div class="alert">
|
||||
<question-circle-outlined />
|
||||
<info-circle-outlined />
|
||||
使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作
|
||||
</div>
|
||||
<div class="search">
|
||||
|
|
@ -326,7 +326,7 @@ import AccessCard from './AccessCard/index.vue';
|
|||
import { message, Form } from 'ant-design-vue';
|
||||
import type { FormInstance, TableColumnType } from 'ant-design-vue';
|
||||
import Markdown from 'vue3-markdown-it';
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { InfoCircleOutlined } from '@ant-design/icons-vue';
|
||||
//测试数据1
|
||||
const resultList1 = [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue