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

fix: 运维管理 设备接入网关自测todo

This commit is contained in:
jackhoo_98 2023-03-16 09:54:48 +08:00
parent d8ca8ce212
commit 7e83d5bdc2
3 changed files with 86 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/link/AccessConfig/Detail/index.vue
View File

@ -55,14 +55,14 @@ import { getProviders, detail } from '@/api/link/accessConfig';
const route = useRoute(); const route = useRoute();
const id = route.params.id as string; const id = route.params.id as string;
const dataSource = ref([]); const dataSource: any = ref([]);
const type = ref(false); const type = ref(false);
const loading = ref(true); const loading = ref(true);
const provider = ref({}); const provider = ref({});
const data = ref({}); const data = ref({});
const showType = ref(''); const showType = ref('');
const goProviders = (param: object) => { const goProviders = (param: any) => {
showType.value = param.type; showType.value = param.type;
provider.value = param; provider.value = param;
type.value = false; type.value = false;
@ -80,7 +80,7 @@ const getTypeList = (result: Record<string, any>) => {
const cloud: any[] = []; const cloud: any[] = [];
const channel: any[] = []; const channel: any[] = [];
const edge: any[] = []; const edge: any[] = [];
result.map((item) => { result.map((item: any) => {
if (item.id === 'fixed-media' || item.id === 'gb28181-2016') { if (item.id === 'fixed-media' || item.id === 'gb28181-2016') {
item.type = 'media'; item.type = 'media';
media.push(item); media.push(item);
@ -138,33 +138,32 @@ const getTypeList = (result: Record<string, any>) => {
}; };
const queryProviders = async () => { const queryProviders = async () => {
const resp = await getProviders(); const resp: any = await getProviders();
if (resp.status === 200) { if (resp.status === 200) {
dataSource.value = getTypeList(resp.result); dataSource.value = getTypeList(resp.result);
// dataSource.value = getTypeList(resp.result)[0].list.filter( // dataSource.value = getTypeList(resp.result)[0].list.filter(
// (item) => item.name !== '插件设备接入', // (item) => item.name !== '插件设备接入',
// ); // );
console.log(111, dataSource.value);
} }
}; };
const getProvidersData = async () => { const getProvidersData = async () => {
if (id !== ':id') { if (id !== ':id') {
getProviders().then((response) => { getProviders().then((response: any) => {
if (response.status === 200) { if (response.status === 200) {
const list = getTypeList(response.result); const list = getTypeList(response.result);
dataSource.value = list.filter( dataSource.value = list.filter(
(item) => (item: any) =>
item.channel === 'network' || item.channel === 'network' ||
item.channel === 'child-device', item.channel === 'child-device',
); );
detail(id).then((resp) => { detail(id).then((resp: any) => {
if (resp.status === 200) { if (resp.status === 200) {
const dt = response.result.find( const dt = response.result.find(
(item) => item?.id === resp.result.provider, (item: any) => item?.id === resp.result.provider,
); );
response.result.forEach((item) => { response.result.forEach((item: any) => {
if (item.id === resp.result.provider) { if (item.id === resp.result.provider) {
resp.result.type = item.type; resp.result.type = item.type;
showType.value = item.type; showType.value = item.type;

133
src/views/link/AccessConfig/components/Network/index.vue
View File

@ -32,7 +32,7 @@
v-for="item in networkList" v-for="item in networkList"
:key="item.id" :key="item.id"
> >
<access-card <AccessCard
@checkedChange="checkedChange" @checkedChange="checkedChange"
:checked="networkCurrent" :checked="networkCurrent"
:data="{ :data="{
@ -84,7 +84,7 @@
</j-tooltip> </j-tooltip>
</div> </div>
</template> </template>
</access-card> </AccessCard>
</j-col> </j-col>
</j-row> </j-row>
<j-empty v-else description="暂无数据" /> <j-empty v-else description="暂无数据" />
@ -139,36 +139,34 @@
<j-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<j-col :span="12"> <j-col :span="12">
<title-component data="基本信息" /> <title-component data="基本信息" />
<div> <j-form
<j-form ref="formRef"
ref="formRef" :model="formData"
:model="formData" layout="vertical"
layout="vertical" >
<j-form-item
label="名称"
v-bind="validateInfos.name"
> >
<j-form-item <j-input
label="名称" v-model:value="formData.name"
v-bind="validateInfos.name" allowClear
> placeholder="请输入名称"
<j-input />
v-model:value="formData.name" </j-form-item>
allowClear <j-form-item
placeholder="请输入名称" label="说明"
/> v-bind="validateInfos.description"
</j-form-item> >
<j-form-item <j-textarea
label="说明" placeholder="请输入说明"
v-bind="validateInfos.description" :rows="4"
> v-model:value="formData.description"
<j-textarea show-count
placeholder="请输入说明" :maxlength="200"
:rows="4" />
v-model:value="formData.description" </j-form-item>
show-count </j-form>
:maxlength="200"
/>
</j-form-item>
</j-form>
</div>
</j-col> </j-col>
<j-col :span="12"> <j-col :span="12">
<div class="config-right"> <div class="config-right">
@ -256,9 +254,7 @@
'stream' 'stream'
" "
> >
<span>{{ {{ getStream(record) }}
getStream(record)
}}</span>
</template> </template>
</template> </template>
</j-table> </j-table>
@ -359,7 +355,7 @@ const stepCurrent = ref(0);
const steps = ref(['网络组件', '消息协议', '完成']); const steps = ref(['网络组件', '消息协议', '完成']);
const networkList: any = ref([]); const networkList: any = ref([]);
const allNetworkList: any = ref([]); const allNetworkList: any = ref([]);
const procotolList = ref([]); const procotolList: any = ref([]);
const allProcotolList = ref([]); const allProcotolList = ref([]);
const networkCurrent: any = ref(''); const networkCurrent: any = ref('');
const procotolCurrent: any = ref(''); const procotolCurrent: any = ref('');
@ -390,11 +386,12 @@ const queryNetworkList = async (id: string, include: string, data = {}) => {
); );
if (resp.status === 200) { if (resp.status === 200) {
networkList.value = resp.result; networkList.value = resp.result;
allNetworkList.value = resp.result;
} }
}; };
const queryProcotolList = async (id: string, params = {}) => { const queryProcotolList = async (id: string, params = {}) => {
const resp = await getProtocolList(ProtocolMapping.get(id), { const resp: any = await getProtocolList(ProtocolMapping.get(id), {
...params, ...params,
'sorts[0].name': 'createTime', 'sorts[0].name': 'createTime',
'sorts[0].order': 'desc', 'sorts[0].order': 'desc',
@ -407,12 +404,12 @@ const queryProcotolList = async (id: string, params = {}) => {
const addNetwork = () => { const addNetwork = () => {
const url = menuStory.menus['link/Type/Detail']?.path; const url = menuStory.menus['link/Type/Detail']?.path;
const tab = window.open( const tab: any = window.open(
`${window.location.origin + window.location.pathname}#${url}?type=${ `${window.location.origin + window.location.pathname}#${url}?type=${
NetworkTypeMapping.get(props.provider?.id) || '' NetworkTypeMapping.get(props.provider?.id) || ''
}`, }`,
); );
tab.onTabSaveSuccess = (value) => { tab.onTabSaveSuccess = (value: any) => {
if (value.success) { if (value.success) {
networkCurrent.value = value.result.id; networkCurrent.value = value.result.id;
queryNetworkList(props.provider?.id, networkCurrent.value || ''); queryNetworkList(props.provider?.id, networkCurrent.value || '');
@ -422,10 +419,10 @@ const addNetwork = () => {
const addProcotol = () => { const addProcotol = () => {
const url = menuStory.menus['link/Protocol']?.path; const url = menuStory.menus['link/Protocol']?.path;
const tab = window.open( const tab: any = window.open(
`${window.location.origin + window.location.pathname}#${url}?save=true`, `${window.location.origin + window.location.pathname}#${url}?save=true`,
); );
tab.onTabSaveSuccess = (value) => { tab.onTabSaveSuccess = (value: any) => {
if (value.success) { if (value.success) {
procotolCurrent.value = value.result?.id; procotolCurrent.value = value.result?.id;
queryProcotolList(props.provider?.id); queryProcotolList(props.provider?.id);
@ -434,15 +431,17 @@ const addProcotol = () => {
}; };
const getNetworkCurrent = () => const getNetworkCurrent = () =>
networkList.value.find((i) => i.id === networkCurrent) && networkList.value.find((i: any) => i.id === networkCurrent) &&
(networkList.value.find((i) => i.id === networkCurrent).addresses || []) (
.length > 0; networkList.value.find((i: any) => i.id === networkCurrent).addresses ||
[]
).length > 0;
const getNetworkCurrentData = () => const getNetworkCurrentData = () =>
getNetworkCurrent() getNetworkCurrent()
? networkList.value.find((i) => i.id === networkCurrent).addresses ? networkList.value.find((i: any) => i.id === networkCurrent).addresses
: []; : [];
const getColor = (i) => (i.health === -1 ? 'red' : 'green'); const getColor = (i: any) => (i.health === -1 ? 'red' : 'green');
const getStream = (record: any) => { const getStream = (record: any) => {
let stream = ''; let stream = '';
@ -457,15 +456,15 @@ const checkedChange = (id: string) => {
}; };
const networkSearch = (value: string) => { const networkSearch = (value: string) => {
if (value) { networkList.value = value
networkList.value = allNetworkList.value.filter( ? allNetworkList.value.filter(
(i: any) => (i: any) =>
i.name && i.name &&
i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase()), i.name
); .toLocaleLowerCase()
} else { .includes(value.toLocaleLowerCase()),
networkList.value = allNetworkList.value; )
} : allNetworkList.value;
}; };
const procotolChange = (id: string) => { const procotolChange = (id: string) => {
if (!props.data.id) { if (!props.data.id) {
@ -474,17 +473,15 @@ const procotolChange = (id: string) => {
}; };
const procotolSearch = (value: string) => { const procotolSearch = (value: string) => {
if (value) { procotolList.value = value
const list = allProcotolList.value.filter((i: any) => { ? allProcotolList.value.filter(
return ( (i: any) =>
i.name && i.name &&
i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase()) i.name
); .toLocaleLowerCase()
}); .includes(value.toLocaleLowerCase()),
procotolList.value = list; )
} else { : allProcotolList.value;
procotolList.value = allProcotolList.value;
}
}; };
const saveData = () => { const saveData = () => {
@ -538,8 +535,6 @@ const next = async () => {
: await getChildConfigView(procotolCurrent.value); : await getChildConfigView(procotolCurrent.value);
if (resp.status === 200) { if (resp.status === 200) {
config.value = resp.result; config.value = resp.result;
console.log(222, config.value);
current.value = current.value + 1; current.value = current.value + 1;
const Group = { const Group = {
title: '分组', title: '分组',
@ -567,8 +562,8 @@ const next = async () => {
return obj; return obj;
}, },
}; };
columnsMQTT.value = [Group, ...ColumnsMQTT]; columnsMQTT.value = [Group, ...ColumnsMQTT] as TableColumnType;
columnsHTTP.value = [Group, ...ColumnsHTTP]; columnsHTTP.value = [Group, ...ColumnsHTTP] as TableColumnType;
} }
} }
} }

26
src/views/link/AccessConfig/index.vue
View File

@ -1,7 +1,11 @@
<template> <template>
<page-container> <page-container>
<div> <div>
<Search :columns="columns" target="search" @search="handleSearch" /> <pro-search
:columns="columns"
target="search"
@search="handleSearch"
/>
<j-pro-table <j-pro-table
ref="tableRef" ref="tableRef"
@ -16,18 +20,14 @@
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>
<j-space> <PermissionButton
<PermissionButton type="primary"
type="primary" @click="handlAdd"
@click="handlAdd" hasPermission="link/AccessConfig:add"
hasPermission="link/AccessConfig:add" >
> <template #icon><AIcon type="PlusOutlined" /></template>
<template #icon 新增
><AIcon type="PlusOutlined" </PermissionButton>
/></template>
新增
</PermissionButton>
</j-space>
</template> </template>
<template #card="slotProps"> <template #card="slotProps">
<CardBox <CardBox