iot-ui-vue/src/views/link/AccessConfig/Detail/index.vue

241 lines
7.8 KiB
Vue

<template>
<page-container>
<j-spin :spinning="loading">
<FullPage>
<j-card :bordered="false">
<div v-if="type && id === ':id'">
<Provider
@onClick="goProviders"
:dataSource="dataSource"
></Provider>
</div>
<div v-else>
<div class="go-back" v-if="id === ':id'">
<a @click="goBack">返回</a>
</div>
<Network
v-if="showType === 'network'"
:provider="provider"
:data="data"
/>
<Media
v-if="showType === 'media'"
:provider="provider"
:data="data"
/>
<Channel
v-if="showType === 'channel'"
:provider="provider"
:data="data"
/>
<Edge
v-if="showType === 'edge'"
:provider="provider"
:data="data"
/>
<Cloud
v-if="showType === 'cloud'"
:provider="provider"
:data="data"
/>
</div>
</j-card>
</FullPage>
</j-spin>
</page-container>
</template>
<script lang="ts" setup name="AccessConfigDetail">
import Network from '../components/Network/index.vue';
import Provider from '../components/Provider/index.vue';
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';
import { getProviders, detail } from '@/api/link/accessConfig';
import { accessConfigTypeFilter } from '@/utils/setting';
const route = useRoute();
const id = route.params.id as string;
const dataSource: any = ref([]);
const type = ref(false);
const loading = ref(true);
const provider = ref({});
const data = ref({});
const showType: any = ref('');
const goProviders = (param: any) => {
showType.value = param.type;
provider.value = param;
type.value = false;
};
const goBack = () => {
provider.value = {};
type.value = true;
};
//network
const TypeMap = new Map([
['fixed-media', 'media'],
['gb28181-2016', 'media'],
['OneNet', 'cloud'],
['Ctwing', 'cloud'],
['modbus-tcp', 'channel'],
['opc-ua', 'channel'],
['official-edge-gateway', 'edge'],
['edge-child-device', 'edge'],
['network', 'network'],
]);
// DataMap后期优化
const DataMap = new Map();
DataMap.set('fixed-media', { type: 'media', title: '视频类设备接入' });
DataMap.set('gb28181-2016', { type: 'media', title: '视频类设备接入' });
DataMap.set('OneNet', { type: 'cloud', title: '云平台接入' });
DataMap.set('Ctwing', { type: 'cloud', title: '云平台接入' });
DataMap.set('modbus-tcp', { type: 'channel', title: '通道类设备接入' });
DataMap.set('opc-ua', { type: 'channel', title: '通道类设备接入' });
DataMap.set('official-edge-gateway', { type: 'edge', title: '官方接入' });
DataMap.set('edge-child-device', { type: 'edge', title: '官方接入' });
DataMap.set('network', { type: 'network', title: '自定义设备接入' });
const getTypeList = (result: Record<string, any>) => {
const list = [];
const media: any[] = [];
const network: any[] = [];
const cloud: any[] = [];
const channel: any[] = [];
const edge: any[] = [];
result.map((item: any) => {
if (item.id === 'fixed-media' || item.id === 'gb28181-2016') {
item.type = 'media';
media.push(item);
} else if (item.id === 'OneNet' || item.id === 'Ctwing') {
item.type = 'cloud';
cloud.push(item);
} else if (item.id === 'modbus-tcp' || item.id === 'opc-ua') {
item.type = 'channel';
channel.push(item);
} else if (
item.id === 'official-edge-gateway' ||
item.id === 'edge-child-device'
) {
item.type = 'edge';
edge.push(item);
} else {
item.type = 'network';
// network.push(item);
/**
* 插件设备接入 暂时不开发 todo
*/
if (item.id !== 'plugin_gateway' || item.name !== '插件设备接入') {
network.push(item);
}
}
});
network.length &&
list.push({
list: [...network],
title: '自定义设备接入',
});
media.length &&
list.push({
list: [...media],
title: '视频类设备接入',
});
cloud.length &&
list.push({
list: [...cloud],
title: '云平台接入',
});
channel.length &&
list.push({
list: [...channel],
title: '通道类设备接入',
});
edge.length &&
list.push({
list: [...edge],
title: '官方接入',
});
return list;
};
const queryProviders = async () => {
const resp: any = await getProviders();
if (resp.status === 200) {
const _data = resp.result || [];
dataSource.value = getTypeList(accessConfigTypeFilter(_data as any[]));
// dataSource.value = getTypeList(resp.result)[0].list.filter(
// (item) => item.name !== '插件设备接入',
// );
// 快速添加接入网关
if (route.query.save && route.query?.type) {
const type = route.query.type;
goProviders(
dataSource.value
.find((f: any) => f.title === DataMap.get(type).title)
?.list?.find((f: any) => f.id === type),
);
}
}
};
const getProvidersData = async () => {
if (id !== ':id') {
getProviders().then((response: any) => {
if (response.status === 200) {
const _data = response.result || [];
const list = getTypeList(
accessConfigTypeFilter(_data as any[]),
);
dataSource.value = list.filter(
(item: any) =>
item.channel === 'network' ||
item.channel === 'child-device',
);
detail(id).then((resp: any) => {
if (resp.status === 200) {
const dt = response.result.find(
(item: any) => item?.id === resp.result.provider,
);
response.result.forEach((item: any) => {
if (item.id === resp.result.provider) {
resp.result.type = TypeMap.has(item.id)
? TypeMap.get(item.id)
: TypeMap.get('network');
showType.value = resp.result.type;
}
});
provider.value = dt;
data.value = resp.result;
type.value = false;
}
});
}
loading.value = false;
});
} else {
type.value = true;
queryProviders();
loading.value = false;
}
};
onMounted(() => {
loading.value = true;
getProvidersData();
});
</script>
<style lang="less" scoped>
.go-back {
margin: 0 0 20px 0;
}
</style>