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

Merge branch 'dev-hub' into dev

This commit is contained in:
jackhoo_98 2023-01-16 09:55:36 +08:00
parent 6d01346d51 295a283856
commit 79524793af
7 changed files with 329 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/link/certificate.js
View File

@ -1,3 +1,6 @@
import server from '@/utils/request'
import server from '@/utils/request';
import { BASE_API_PATH } from '@/utils/variable';
export const save = (data) => server.post(`/network/certificate`, data)
export const NETWORK_CERTIFICATE_UPLOAD = `${BASE_API_PATH}/network/certificate/upload`;
export const save = (data) => server.post(`/network/certificate`, data);

2
src/utils/variable.ts
View File

@ -3,5 +3,3 @@ export const BASE_API_PATH = import.meta.env.VITE_APP_BASE_API
export const TOKEN_KEY = 'X-Access-Token'
export const Version_Code = 'version_code'
export const NETWORK_CERTIFICATE_UPLOAD = '/network/certificate/upload'

13
src/views/link/AccessConfig/components/AccessCard/index.vue
View File

@ -16,13 +16,13 @@
}}</a-tooltip>
</div>
<div class="checked-icon">
<div><a-icon type="check" /></div>
<div><CheckOutlined /></div>
</div>
</a-card>
</template>
<script lang="ts" setup name="AccessCard">
import { CheckOutlined } from '@ant-design/icons-vue';
const emit = defineEmits(['checkedChange']);
@ -36,13 +36,10 @@ const props = defineProps({
default: () => {},
},
});
console.log(1112,props);
const checkedChange=(id:string)=>{
emit('checkedChange', id);
}
const checkedChange = (id: string) => {
emit('checkedChange', id);
};
</script>
<style lang="less" scoped>

120
src/views/link/AccessConfig/components/Media/index.vue
View File

@ -1,11 +1,85 @@
<template>
<div style="margin-top: 10px">
111
</div>
<div class="container">
<div v-if="channel==='fixed-media'" class="card-last">
<a-row :gutter="[24, 24]">
<a-col :span="12">
<title-component data="基本信息" />
<div>
<a-form
:model="formState"
name="basic"
autocomplete="off"
layout="vertical"
@finish="onFinish"
>
<a-form-item
label="名称"
name="name"
:rules="[
{
required: true,
message: '请输入证书名称',
trigger: 'blur',
},
{ max: 64, message: '最多可输入64个字符' },
]"
>
<a-input v-model:value="formState.name" />
</a-form-item>
<a-form-item label="说明" name="description">
<a-textarea
placeholder="请输入说明"
:rows="4"
v-model:value="formState.description"
show-count
:maxlength="200"
/>
</a-form-item>
<a-form-item>
<a-button 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">
<div class="config-right-item-title">接入方式</div>
<div class="config-right-item-context">
{{ provider.name }}
</div>
<div class="config-right-item-context">
{{ provider.description }}
</div>
</div>
<div class="config-right-item">
<div class="config-right-item-title">消息协议</div>
<div class="config-right-item-context">
{{
provider.id === 'fixed-media'
? 'URL'
: 'SIP'
}}
</div>
</div>
</div>
</a-col>
</a-row>
</div>
<div v-else>123</div>
</div>
</template>
<script lang="ts" setup name="AccessMedia">
import { message, Form } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
interface FormState {
name: string;
description: string;
}
const props = defineProps({
provider: {
@ -18,13 +92,47 @@ const props = defineProps({
},
});
const channel = ref(props.provider.channel)
console.log(211,props);
const channel = ref(props.provider.channel);
console.log(211, channel.value, props);
const formState = reactive<FormState>({
name: '',
description: '',
});
const onFinish = (values: any) => {
console.log('Success:', values);
};
</script>
<style lang="less" scoped>
.container {
margin: 20px;
}
.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);
}
}
}
</style>

241
src/views/link/AccessConfig/components/Network.vue
View File

@ -126,7 +126,12 @@
</div>
</div>
<div class="steps-box" v-else>
<div class="card-last">
<div
class="card-last"
:style="`max-height:${
clientHeight > 900 ? 750 : clientHeight * 0.7
}px`"
>
<a-row :gutter="[24, 24]">
<a-col :span="12">
<title-component data="基本信息" />
@ -190,7 +195,6 @@
v-if="config.document"
>
<Markdown :source="config.document" />
</div>
</div>
<div
@ -255,22 +259,32 @@
:scroll="{ y: 300 }"
>
<template
#stream
slot-scope="text, record"
#bodyCell="{ column, text, record }"
>
<span
<template
v-if="
record.upstream &&
record.downstream
column.dataIndex ===
'stream'
"
>上行、下行</span
>
<span v-else-if="record.upstream"
>上行</span
>
<span v-else-if="record.downstream"
>下行</span
>
<span
v-if="
record.upstream &&
record.downstream
"
>上行、下行</span
>
<span
v-else-if="record.upstream"
>上行</span
>
<span
v-else-if="
record.downstream
"
>下行</span
>
</template>
</template>
</a-table>
</div>
@ -314,10 +328,9 @@ import {
} from '../Detail/data';
import AccessCard from './AccessCard/index.vue';
import { message, Form } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import type { FormInstance, TableColumnType } from 'ant-design-vue';
import Markdown from 'vue3-markdown-it';
//测试数据1
const resultList1 = [
{
@ -363,13 +376,158 @@ const resultList1 = [
// metadata: '',
// };
const result2 = {
"id": "MQTT",
"name": "MQTT",
"features": [],
"routes": [],
"document": "# MQTT认证说明\r\nCONNECT报文:\r\n```text\r\nclientId: 设备ID\r\nusername: secureId+\"|\"+timestamp\r\npassword: md5(secureId+\"|\"+timestamp+\"|\"+secureKey)\r\n ```\r\n\r\n说明: secureId以及secureKey在创建设备产品或设备实例时进行配置. \r\ntimestamp为当前系统时间戳(毫秒),与系统时间不能相差5分钟.\r\nmd5为32位,不区分大小写.",
"metadata": "{\"functions\":[],\"name\":\"test\",\"description\":\"测试用\",\"id\":\"test\",\"properties\":[{\"valueType\":{\"round\":\"HALF_UP\",\"type\":\"double\"},\"name\":\"温度\",\"id\":\"t\"},{\"valueType\":{\"round\":\"HALF_UP\",\"type\":\"int\"},\"name\":\"状态\",\"id\":\"state\"}],\"events\":[],\"tags\":[]}"
}
id: 'MQTT',
name: 'MQTT',
features: [
{
id: 'supportFirmware',
name: '支持固件升级',
},
],
routes: [
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/properties/report',
upstream: true,
downstream: false,
qos: 0,
group: '属性上报',
description: '上报物模型属性数据',
example: '{"properties":{"属性ID":"属性值"}}',
address: '/{productId:产品ID}/{deviceId:设备ID}/properties/report',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/properties/read',
upstream: false,
downstream: true,
qos: 0,
group: '读取属性',
description: '平台下发读取物模型属性数据指令',
example:
'{"messageId":"消息ID,回复时需要一致.","properties":["属性ID"]}',
address: '/{productId:产品ID}/{deviceId:设备ID}/properties/read',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/properties/read/reply',
upstream: true,
downstream: false,
qos: 0,
group: '读取属性',
description: '对平台下发的读取属性指令进行响应',
example:
'{"messageId":"消息ID,与读取指令中的ID一致.","properties":{"属性ID":"属性值"}}',
address:
'/{productId:产品ID}/{deviceId:设备ID}/properties/read/reply',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/properties/write',
upstream: false,
downstream: true,
qos: 0,
group: '修改属性',
description: '平台下发修改物模型属性数据指令',
example:
'{"messageId":"消息ID,回复时需要一致.","properties":{"属性ID":"属性值"}}',
address: '/{productId:产品ID}/{deviceId:设备ID}/properties/write',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/properties/write/reply',
upstream: true,
downstream: false,
qos: 0,
group: '修改属性',
description: '对平台下发的修改属性指令进行响应',
example:
'{"messageId":"消息ID,与修改指令中的ID一致.","properties":{"属性ID":"属性值"}}',
address:
'/{productId:产品ID}/{deviceId:设备ID}/properties/write/reply',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/event/{eventId:事件ID}',
upstream: true,
downstream: false,
qos: 0,
group: '事件上报',
description: '上报物模型事件数据',
example: '{"data":{"key":"value"}}',
address:
'/{productId:产品ID}/{deviceId:设备ID}/event/{eventId:事件ID}',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/function/invoke',
upstream: false,
downstream: true,
qos: 0,
group: '调用功能',
description: '平台下发功能调用指令',
example:
'{"messageId":"消息ID,回复时需要一致.","functionId":"功能标识","inputs":[{"name":"参数名","value":"参数值"}]}',
address: '/{productId:产品ID}/{deviceId:设备ID}/function/invoke',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/function/invoke/reply',
upstream: true,
downstream: false,
qos: 0,
group: '调用功能',
description: '设备响应平台下发的功能调用指令',
example:
'{"messageId":"消息ID,与下发指令中的messageId一致.","output":"输出结果,格式与物模型中定义的类型一致"',
address:
'/{productId:产品ID}/{deviceId:设备ID}/function/invoke/reply',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/child/{childDeviceId:子设备ID}/{#:子设备相应操作的topic}',
upstream: true,
downstream: true,
qos: 0,
group: '子设备消息',
description: '网关上报或者平台下发子设备消息',
address:
'/{productId:产品ID}/{deviceId:设备ID}/child/{childDeviceId:子设备ID}/{#:子设备相应操作的topic}',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/child-reply/{childDeviceId:子设备ID}/{#:子设备相应操作的topic}',
upstream: true,
downstream: true,
qos: 0,
group: '子设备消息',
description: '网关回复平台下发给子设备的指令结果',
address:
'/{productId:产品ID}/{deviceId:设备ID}/child-reply/{childDeviceId:子设备ID}/{#:子设备相应操作的topic}',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/tags',
upstream: true,
downstream: false,
qos: 0,
group: '更新标签',
description: '更新标签数据',
example: '{"tags":{"key","value"}}',
address: '/{productId:产品ID}/{deviceId:设备ID}/tags',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/online',
upstream: true,
downstream: false,
qos: 0,
group: '状态管理',
description: '设备上线',
address: '/{productId:产品ID}/{deviceId:设备ID}/online',
},
{
topic: '/{productId:产品ID}/{deviceId:设备ID}/offline',
upstream: true,
downstream: false,
qos: 0,
group: '状态管理',
description: '设备离线',
address: '/{productId:产品ID}/{deviceId:设备ID}/offline',
},
],
document:
'### 认证说明\r\n\r\nCONNECT报文:\r\n```text\r\nclientId: 设备ID\r\nusername: secureId+"|"+timestamp\r\npassword: md5(secureId+"|"+timestamp+"|"+secureKey)\r\n ```\r\n\r\n说明: secureId以及secureKey在创建设备产品或设备实例时进行配置. \r\ntimestamp为当前时间戳(毫秒),与服务器时间不能相差5分钟.\r\nmd5为32位,不区分大小写.',
metadata: '',
};
function generateUUID() {
var d = new Date().getTime();
@ -400,6 +558,8 @@ const props = defineProps({
},
});
const clientHeight = document.body.clientHeight;
const formRef = ref<FormInstance>();
const useForm = Form.useForm;
@ -412,7 +572,7 @@ const allProcotolList = ref([]);
const networkCurrent = ref('');
const procotolCurrent = ref('');
let config = ref({});
let columnsMQTT = ref([]);
let columnsMQTT = ref(<TableColumnType>[]);
const form = reactive({
name: '',
description: '',
@ -576,7 +736,7 @@ const next = async () => {
//使用测试数据2
config.value = result2;
current.value = current.value + 1;
columnsMQTT = [
columnsMQTT.value = [
{
title: '分组',
dataIndex: 'group',
@ -584,20 +744,24 @@ const next = async () => {
ellipsis: true,
align: 'center',
width: 100,
customRender: (value, row, index) => {
customCell: (record: object, rowIndex: number) => {
const obj = {
children: value,
attrs: {},
children: record,
rowSpan: 0,
};
const list = (config && config.routes) || [];
const arr = list.filter((res) => {
return res.group == row.group;
});
if (index == 0 || list[index - 1].group !== row.group) {
obj.attrs.rowSpan = arr.length;
} else {
obj.attrs.rowSpan = 0;
}
const list =
(config.value && config.value.routes) || [];
const arr = list.filter(
(res: object) => res.group == record.group,
);
if (
rowIndex == 0 ||
list[rowIndex - 1].group !== record.group
)
obj.rowSpan = arr.length;
return obj;
},
},
@ -605,6 +769,7 @@ const next = async () => {
title: 'topic',
dataIndex: 'topic',
key: 'topic',
align: 'center',
ellipsis: true,
},
{
@ -614,7 +779,6 @@ const next = async () => {
ellipsis: true,
align: 'center',
width: 100,
scopedSlots: { customRender: 'stream' },
},
{
title: '说明',
@ -755,7 +919,6 @@ watch(
}
.card-last {
padding-right: 5px;
max-height: 580px;
overflow-y: auto;
overflow-x: hidden;
}

9
src/views/link/Certificate/Detail/CertificateFile.vue
View File

@ -10,7 +10,7 @@
<a-upload
accept=".pem"
listType="text"
:action="`${BASE_API_PATH}${NETWORK_CERTIFICATE_UPLOAD}`"
:action="NETWORK_CERTIFICATE_UPLOAD"
:headers="{
[TOKEN_KEY]: LocalStore.get(TOKEN_KEY),
}"
@ -31,11 +31,8 @@ import { UploadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadChangeParam } from 'ant-design-vue';
import { LocalStore } from '@/utils/comm';
import {
BASE_API_PATH,
TOKEN_KEY,
NETWORK_CERTIFICATE_UPLOAD,
} from '@/utils/variable';
import { TOKEN_KEY } from '@/utils/variable';
import { NETWORK_CERTIFICATE_UPLOAD } from '@/api/link/certificate';
import type { UploadProps } from 'ant-design-vue';
const emit = defineEmits(['update:modelValue', 'change']);

6
src/views/link/Certificate/Detail/index.vue
View File

@ -97,12 +97,6 @@ import { message, Form } from 'ant-design-vue';
import { getImage } from '@/utils/comm';
import CertificateFile from './CertificateFile.vue';
import type { UploadChangeParam } from 'ant-design-vue';
import { LocalStore } from '@/utils/comm';
import {
BASE_API_PATH,
TOKEN_KEY,
NETWORK_CERTIFICATE_UPLOAD,
} from '@/utils/variable';
import { save } from '@/api/link/certificate';
const router = useRouter();