feat: 设备接入网关 通道类设备接入 modbus、opcua

This commit is contained in:
jackhoo_98 2023-01-18 10:20:43 +08:00
parent 693da4ec6d
commit 6e34f8c018
4 changed files with 190 additions and 25 deletions

View File

@ -9,8 +9,13 @@
</div>
<div v-else>
<div v-if="!id"><a @click="goBack">返回</a></div>
<AccessNetwork v-if="showType==='network'" :provider="provider" :data="data" />
<Media v-if="showType==='media'" :provider="provider" :data="data" />
<AccessNetwork
v-if="showType === 'network'"
:provider="provider"
:data="data"
/>
<Media v-if="showType === 'media'" :provider="provider" />
<Channel v-if="showType === 'channel'" :provider="provider" />
</div>
</a-card>
</a-spin>
@ -22,7 +27,7 @@ import AccessNetwork from '../components/Network.vue';
import Provider from '../components/Provider/index.vue';
import { getProviders, detail } from '@/api/link/accessConfig';
import Media from '../components/Media/index.vue';
import Channel from '../components/Channel/index.vue';
// const router = useRouter();
const route = useRoute();
@ -34,14 +39,13 @@ const type = ref(false);
const loading = ref(true);
const provider = ref({});
const data = ref({});
const showType = ref('')
const showType = ref('');
const goProviders = (param: object) => {
showType.value = param.type
const goProviders = (param: object) => {
showType.value = param.type;
provider.value = param;
type.value = false;
console.log(1123,showType.value,param);
console.log(1123, showType.value, param);
};
const goBack = () => {
@ -59,22 +63,22 @@ const queryProviders = async () => {
const edge: any[] = [];
resp.result.map((item) => {
if (item.id === 'fixed-media' || item.id === 'gb28181-2016') {
item.type='media'
item.type = 'media';
media.push(item);
} else if (item.id === 'OneNet' || item.id === 'Ctwing') {
item.type='cloud'
item.type = 'cloud';
cloud.push(item);
} else if (item.id === 'modbus-tcp' || item.id === 'opc-ua') {
item.type='channel'
item.type = 'channel';
channel.push(item);
} else if (
item.id === 'official-edge-gateway' ||
item.id === 'edge-child-device'
) {
item.type='edge'
item.type = 'edge';
edge.push(item);
} else {
item.type='network'
item.type = 'network';
network.push(item);
}
});
@ -114,7 +118,7 @@ const queryProviders = async () => {
title: '官方接入',
});
}
dataSource.value = list
dataSource.value = list;
}
};

View File

@ -0,0 +1,166 @@
<template>
<div class="container">
<div v-if="type === 'channel'" 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
placeholder="请输入名称"
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">
<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">
消息协议{{ provider.id }}
</div>
</div>
<div class="config-right-item">
<title-component data="设备接入指引" />
<div class="config-right-item-context">
1配置{{ provider.name }}通道
</div>
<div class="config-right-item-context">
2创建{{ provider.name }}设备接入网关
</div>
<div class="config-right-item-context">
3创建产品并选中接入方式为{{ provider.name }}
</div>
<div class="config-right-item-context">
4添加设备单独为每一个设备进行数据点绑定
</div>
</div>
</div>
</a-col>
</a-row>
</div>
</div>
</template>
<script lang="ts" setup name="AccessMedia">
import { message, Form } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import { update, save } from '@/api/link/accessConfig';
interface FormState {
name: string;
description: string;
}
const route = useRoute();
const id = route.query.id;
const props = defineProps({
provider: {
type: Object,
default: () => {},
},
});
const type = ref(props.provider.type);
const formState = reactive<FormState>({
name: '',
description: '',
});
const onFinish = async (values: any) => {
const providerId = props.provider.id;
const params = {
...values,
provider: providerId,
protocol: providerId,
transport: providerId === 'modbus-tcp' ? 'MODBUS_TCP' : 'OPC_UA',
channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
};
const resp = !!id ? await update({ ...params, id }) : await save(params);
if (resp.status === 200) {
message.success('操作成功!');
// if (params.get('save')) {
// if ((window as any).onTabSaveSuccess) {
// if (resp.result) {
// (window as any).onTabSaveSuccess(resp.result);
// setTimeout(() => window.close(), 300);
// }
// }
// } else {
history.back();
// }
}
};
</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>

View File

@ -539,10 +539,6 @@ const props = defineProps({
type: Object,
default: () => {},
},
data: {
type: Object,
default: () => {},
},
});
const route = useRoute();

View File

@ -24,7 +24,10 @@
{ max: 64, message: '最多可输入64个字符' },
]"
>
<a-input v-model:value="formState.name" />
<a-input
placeholder="请输入名称"
v-model:value="formState.name"
/>
</a-form-item>
<a-form-item label="说明" name="description">
<a-textarea
@ -68,8 +71,8 @@
</a-col>
</a-row>
</div>
<div v-else>
<GB28181 :data="props.data" :provider="props.provider"></GB28181>
<div v-else-if="channel === 'gb28181'">
<GB28181 :provider="props.provider"></GB28181>
</div>
</div>
</template>
@ -92,10 +95,6 @@ const props = defineProps({
type: Object,
default: () => {},
},
data: {
type: Object,
default: () => {},
},
});
const channel = ref(props.provider.channel);