fix: merge branch 'dev-hub' into dev
This commit is contained in:
commit
aa4fc217e4
|
@ -36,7 +36,7 @@ export const undeploy = (id: string) =>
|
|||
export const deploy = (id: string) =>
|
||||
server.post(`/gateway/device/${id}/_startup`);
|
||||
|
||||
export const del = (id: string) => server.remove(`/gateway/device/${id}`);
|
||||
export const remove = (id: string) => server.remove(`/gateway/device/${id}`);
|
||||
|
||||
export const getResourcesCurrent = () =>
|
||||
server.get(`/network/resources/alive/_current`);
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<a-card :bordered="false">
|
||||
<div v-if="type">
|
||||
<div v-if="type && modeType === 'add'">
|
||||
<Provider
|
||||
@onClick="goProviders"
|
||||
:dataSource="dataSource"
|
||||
|
@ -14,9 +14,21 @@
|
|||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Media v-if="showType === 'media'" :provider="provider" />
|
||||
<Channel v-if="showType === 'channel'" :provider="provider" />
|
||||
<Edge v-if="showType === 'edge'" :provider="provider" />
|
||||
<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"
|
||||
|
@ -37,10 +49,10 @@ 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();
|
||||
|
||||
const id = route.query.id;
|
||||
const modeType = route.params.type as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const dataSource = ref([]);
|
||||
const type = ref(false);
|
||||
|
@ -53,7 +65,6 @@ const goProviders = (param: object) => {
|
|||
showType.value = param.type;
|
||||
provider.value = param;
|
||||
type.value = false;
|
||||
console.log(1123, showType.value, param);
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
|
@ -61,15 +72,14 @@ const goBack = () => {
|
|||
type.value = true;
|
||||
};
|
||||
|
||||
const queryProviders = async () => {
|
||||
const resp = await getProviders();
|
||||
if (resp.status === 200) {
|
||||
const getTypeList = (result: any[]) => {
|
||||
const list = [];
|
||||
const media: any[] = [];
|
||||
const network: any[] = [];
|
||||
const cloud: any[] = [];
|
||||
const channel: any[] = [];
|
||||
const edge: any[] = [];
|
||||
resp.result.map((item) => {
|
||||
result.map((item) => {
|
||||
if (item.id === 'fixed-media' || item.id === 'gb28181-2016') {
|
||||
item.type = 'media';
|
||||
media.push(item);
|
||||
|
@ -90,51 +100,49 @@ const queryProviders = async () => {
|
|||
network.push(item);
|
||||
}
|
||||
});
|
||||
const list = [];
|
||||
if (network.length) {
|
||||
|
||||
network.length &&
|
||||
list.push({
|
||||
// type: 'network',
|
||||
list: [...network],
|
||||
title: '自定义设备接入',
|
||||
});
|
||||
}
|
||||
if (media.length) {
|
||||
media.length &&
|
||||
list.push({
|
||||
// type: 'media',
|
||||
list: [...media],
|
||||
title: '视频类设备接入',
|
||||
});
|
||||
}
|
||||
if (cloud.length) {
|
||||
cloud.length &&
|
||||
list.push({
|
||||
// type: 'cloud',
|
||||
list: [...cloud],
|
||||
title: '云平台接入',
|
||||
});
|
||||
}
|
||||
if (channel.length) {
|
||||
channel.length &&
|
||||
list.push({
|
||||
// type: 'channel',
|
||||
list: [...channel],
|
||||
title: '通道类设备接入',
|
||||
});
|
||||
}
|
||||
if (edge.length) {
|
||||
edge.length &&
|
||||
list.push({
|
||||
// type: 'edge',
|
||||
list: [...edge],
|
||||
title: '官方接入',
|
||||
});
|
||||
}
|
||||
dataSource.value = list;
|
||||
|
||||
return list;
|
||||
};
|
||||
|
||||
const queryProviders = async () => {
|
||||
const resp = await getProviders();
|
||||
if (resp.status === 200) {
|
||||
dataSource.value = getTypeList(resp.result);
|
||||
}
|
||||
};
|
||||
|
||||
const getProvidersData = async () => {
|
||||
if (id) {
|
||||
if (id && modeType !== 'add') {
|
||||
getProviders().then((response) => {
|
||||
if (response.status === 200) {
|
||||
dataSource.value = response.result.filter(
|
||||
const list = getTypeList(response.result);
|
||||
dataSource.value = list.filter(
|
||||
(item) =>
|
||||
item.channel === 'network' ||
|
||||
item.channel === 'child-device',
|
||||
|
@ -144,15 +152,21 @@ const getProvidersData = async () => {
|
|||
const dt = response.result.find(
|
||||
(item) => item?.id === resp.result.provider,
|
||||
);
|
||||
|
||||
response.result.forEach((item) => {
|
||||
if (item.id === resp.result.provider) {
|
||||
resp.result.type = item.type;
|
||||
showType.value = item.type;
|
||||
}
|
||||
});
|
||||
|
||||
provider.value = dt;
|
||||
data.value = resp.result;
|
||||
type.value = false;
|
||||
}
|
||||
});
|
||||
loading.value = false;
|
||||
} else {
|
||||
loading.value = false;
|
||||
}
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
type.value = true;
|
||||
|
|
|
@ -39,7 +39,10 @@
|
|||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit"
|
||||
<a-button
|
||||
v-if="modeType !== 'view'"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
>保存</a-button
|
||||
>
|
||||
</a-form-item>
|
||||
|
@ -93,18 +96,23 @@ interface FormState {
|
|||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
const modeType = route.params.type as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const type = ref(props.provider.type);
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
const formState = ref<FormState>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
@ -117,7 +125,10 @@ const onFinish = async (values: any) => {
|
|||
transport: ProtocolMapping.get(providerId),
|
||||
channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
|
||||
};
|
||||
const resp = !!id ? await update({ ...params, id }) : await save(params);
|
||||
const resp =
|
||||
!!id && modeType !== 'add'
|
||||
? await update({ ...params, id })
|
||||
: await save(params);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功!');
|
||||
// if (params.get('save')) {
|
||||
|
@ -132,6 +143,15 @@ const onFinish = async (values: any) => {
|
|||
// }
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (modeType !== 'add') {
|
||||
formState.value = {
|
||||
name: props.data.name,
|
||||
description: props.data?.description || '',
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -199,7 +199,7 @@
|
|||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<a-form
|
||||
:model="form"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
|
@ -219,14 +219,14 @@
|
|||
>
|
||||
<a-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.name"
|
||||
v-model:value="formData.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="form.description"
|
||||
v-model:value="formData.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
|
@ -277,16 +277,20 @@
|
|||
<a-button
|
||||
v-if="[0, 1].includes(current)"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
<a-button v-if="current === 2" type="primary" @click="saveData">
|
||||
<a-button
|
||||
v-if="current === 2 && modeType !== 'view'"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="saveData"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||
上一步
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -379,7 +383,8 @@ interface Form {
|
|||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
const modeType = route.params.type as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
|
@ -396,13 +401,13 @@ const channel = ref(props.provider.channel);
|
|||
const formRef1 = ref<FormInstance>();
|
||||
const formRef2 = ref<FormInstance>();
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
const formState = ref<FormState>({
|
||||
apiAddress: 'https://ag-api.ctwing.cn/',
|
||||
appKey: '',
|
||||
appSecret: '',
|
||||
description: '',
|
||||
});
|
||||
const form = reactive<Form>({
|
||||
const formData = ref<Form>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
@ -415,9 +420,7 @@ const allProcotolList = ref([]);
|
|||
const procotolCurrent = ref('');
|
||||
|
||||
const procotolChange = (id: string) => {
|
||||
if (!props.data?.id) {
|
||||
procotolCurrent.value = id;
|
||||
}
|
||||
};
|
||||
|
||||
const procotolSearch = (value: string) => {
|
||||
|
@ -439,7 +442,7 @@ const saveData = async () => {
|
|||
const params = {
|
||||
...data,
|
||||
configuration: {
|
||||
...formState,
|
||||
...formState.value,
|
||||
protocol: procotolCurrent.value,
|
||||
},
|
||||
protocol: procotolCurrent.value,
|
||||
|
@ -447,7 +450,7 @@ const saveData = async () => {
|
|||
transport: 'HTTP_SERVER',
|
||||
};
|
||||
const resp =
|
||||
props.data && props.data.id
|
||||
!!id && modeType !== 'add'
|
||||
? await update({
|
||||
...props.data,
|
||||
...params,
|
||||
|
@ -514,7 +517,16 @@ const next = async () => {
|
|||
const prev = () => {
|
||||
current.value = current.value - 1;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (modeType !== 'add') {
|
||||
formState.value = props.data.configuration;
|
||||
procotolCurrent.value = props.data.protocol;
|
||||
formData.value = {
|
||||
name: props.data.name,
|
||||
description: props.data.description,
|
||||
};
|
||||
}
|
||||
});
|
||||
watch(
|
||||
current,
|
||||
(v) => {
|
||||
|
|
|
@ -292,7 +292,7 @@
|
|||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<a-form
|
||||
:model="form"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
|
@ -312,26 +312,18 @@
|
|||
>
|
||||
<a-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.name"
|
||||
v-model:value="formData.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="form.description"
|
||||
v-model:value="formData.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>
|
||||
|
@ -378,16 +370,20 @@
|
|||
<a-button
|
||||
v-if="[0, 1].includes(current)"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
<a-button v-if="current === 2" type="primary" @click="saveData">
|
||||
<a-button
|
||||
style="margin-right: 8px"
|
||||
v-if="current === 2 && modeType !== 'view'"
|
||||
type="primary"
|
||||
@click="saveData"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||
上一步
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -483,7 +479,8 @@ interface Form {
|
|||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
const modeType = route.params.type as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
|
@ -500,14 +497,14 @@ const channel = ref(props.provider.channel);
|
|||
const formRef1 = ref<FormInstance>();
|
||||
const formRef2 = ref<FormInstance>();
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
const formState = ref<FormState>({
|
||||
apiAddress: 'https://api.heclouds.com/',
|
||||
apiKey: '',
|
||||
validateToken: '',
|
||||
aesKey: '',
|
||||
description: '',
|
||||
});
|
||||
const form = reactive<Form>({
|
||||
const formData = ref<Form>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
@ -520,9 +517,7 @@ const allProcotolList = ref([]);
|
|||
const procotolCurrent = ref('');
|
||||
|
||||
const procotolChange = (id: string) => {
|
||||
if (!props.data?.id) {
|
||||
procotolCurrent.value = id;
|
||||
}
|
||||
};
|
||||
|
||||
const procotolSearch = (value: string) => {
|
||||
|
@ -544,7 +539,7 @@ const saveData = async () => {
|
|||
const params = {
|
||||
...data,
|
||||
configuration: {
|
||||
...formState,
|
||||
...formState.value,
|
||||
protocol: procotolCurrent.value,
|
||||
},
|
||||
protocol: procotolCurrent.value,
|
||||
|
@ -552,7 +547,7 @@ const saveData = async () => {
|
|||
transport: 'HTTP_SERVER',
|
||||
};
|
||||
const resp =
|
||||
props.data && props.data.id
|
||||
!!id && modeType !== 'add'
|
||||
? await update({
|
||||
...props.data,
|
||||
...params,
|
||||
|
@ -619,6 +614,17 @@ const prev = () => {
|
|||
current.value = current.value - 1;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (modeType !== 'add') {
|
||||
formState.value = props.data.configuration;
|
||||
procotolCurrent.value = props.data.protocol;
|
||||
formData.value = {
|
||||
name: props.data.name,
|
||||
description: props.data.description,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
current,
|
||||
(v) => {
|
||||
|
|
|
@ -17,9 +17,6 @@
|
|||
import Ctwing from './Ctwing.vue';
|
||||
import OneNet from './OneNet.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
|
|
|
@ -140,7 +140,7 @@
|
|||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
v-if="current !== 1"
|
||||
v-if="current !== 1 && modeType !== 'view'"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
>保存</a-button
|
||||
|
@ -171,15 +171,22 @@
|
|||
v-if="channel !== 'edge-child-device'"
|
||||
:class="current !== 1 ? 'steps-action' : 'steps-action-save'"
|
||||
>
|
||||
<a-button v-if="[0].includes(current)" @click="next">
|
||||
<a-button
|
||||
v-if="[0].includes(current)"
|
||||
style="margin-right: 8px"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
<a-button v-if="current === 1" type="primary" @click="saveData">
|
||||
<a-button
|
||||
v-if="current === 1 && modeType !== 'view'"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="saveData"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||
上一步
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -290,19 +297,25 @@ interface FormState {
|
|||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
const modeType = route.params.type as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const type = ref(props.provider.type);
|
||||
const type = props.provider.type;
|
||||
|
||||
const channel = ref(props.provider.channel);
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
const formState = ref<FormState>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
@ -324,9 +337,10 @@ const onFinish = async (values: any) => {
|
|||
transport: ProtocolMapping.get(providerId),
|
||||
};
|
||||
if (networkCurrent.value) params.channelId = networkCurrent.value;
|
||||
console.log(1112, networkCurrent.value, params);
|
||||
|
||||
const resp = !!id ? await update({ ...params, id }) : await save(params);
|
||||
const resp =
|
||||
!!id && modeType !== 'add'
|
||||
? await update({ ...params, id })
|
||||
: await save(params);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功!');
|
||||
// if (params.get('save')) {
|
||||
|
@ -407,6 +421,13 @@ onMounted(() => {
|
|||
if (props.provider.id === 'official-edge-gateway') {
|
||||
queryNetworkList(props.provider.id, '');
|
||||
}
|
||||
if (modeType !== 'add') {
|
||||
formState.value = {
|
||||
name: props.data.name,
|
||||
description: props.data?.description || '',
|
||||
};
|
||||
networkCurrent.value = props.data.channelId;
|
||||
}
|
||||
}),
|
||||
watch(
|
||||
current,
|
||||
|
|
|
@ -436,17 +436,18 @@
|
|||
<a-col :span="12">
|
||||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<a-form :model="form" layout="vertical">
|
||||
<a-form :model="formData" layout="vertical">
|
||||
<a-form-item
|
||||
label="名称"
|
||||
v-bind="validateInfos.name"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="form.name"
|
||||
v-model:value="formData.name"
|
||||
allowClear
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="说明"
|
||||
v-bind="validateInfos.description"
|
||||
|
@ -454,7 +455,7 @@
|
|||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="form.description"
|
||||
v-model:value="formData.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
|
@ -494,15 +495,22 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="steps-action">
|
||||
<a-button v-if="[0].includes(current)" @click="next">
|
||||
<a-button
|
||||
v-if="[0].includes(current)"
|
||||
style="margin-right: 8px"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
<a-button v-if="current === 1" type="primary" @click="saveData">
|
||||
<a-button
|
||||
v-if="current === 1 && modeType !== 'view'"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="saveData"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||
上一步
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -544,10 +552,15 @@ const props = defineProps({
|
|||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
const modeType = route.params.type as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const activeKey: any = ref([]);
|
||||
const clientHeight = document.body.clientHeight;
|
||||
|
@ -559,11 +572,11 @@ const useForm = Form.useForm;
|
|||
const current = ref(0);
|
||||
const stepCurrent = ref(0);
|
||||
const steps = ref(['信令配置', '完成']);
|
||||
const form = reactive({
|
||||
const formData = ref({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
const formState = reactive<FormState>({
|
||||
let formState = ref<FormState>({
|
||||
domain: '',
|
||||
sipId: '',
|
||||
shareCluster: true,
|
||||
|
@ -574,6 +587,7 @@ const formState = reactive<FormState>({
|
|||
publicHost: '',
|
||||
},
|
||||
});
|
||||
|
||||
let params = {
|
||||
configuration: {},
|
||||
};
|
||||
|
@ -628,12 +642,13 @@ const handleChangeForm2Sip = (index: number) => {
|
|||
};
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(
|
||||
form,
|
||||
formData,
|
||||
reactive({
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
description: [{ max: 200, message: '最多可输入200个字符' }],
|
||||
}),
|
||||
);
|
||||
|
||||
|
@ -646,7 +661,9 @@ const saveData = () => {
|
|||
transport: 'SIP',
|
||||
channel: 'gb28181',
|
||||
};
|
||||
const resp = !!id
|
||||
|
||||
const resp =
|
||||
!!id && modeType !== 'add'
|
||||
? await update({ ...params, id })
|
||||
: await save(params);
|
||||
if (resp.status === 200) {
|
||||
|
@ -723,6 +740,14 @@ onMounted(() => {
|
|||
clustersList.value = list;
|
||||
}
|
||||
});
|
||||
|
||||
if (modeType !== 'add') {
|
||||
formState.value = props.data.configuration;
|
||||
formData.value = {
|
||||
name: props.data.name,
|
||||
description: props.data?.description || '',
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
|
|
|
@ -39,7 +39,10 @@
|
|||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit"
|
||||
<a-button
|
||||
v-if="modeType !== 'view'"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
>保存</a-button
|
||||
>
|
||||
</a-form-item>
|
||||
|
@ -72,7 +75,7 @@
|
|||
</a-row>
|
||||
</div>
|
||||
<div v-else-if="channel === 'gb28181'">
|
||||
<GB28181 :provider="props.provider"></GB28181>
|
||||
<GB28181 :provider="props.provider" :data="props.data"></GB28181>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -88,18 +91,23 @@ interface FormState {
|
|||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
const modeType = route.params.type as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const channel = ref(props.provider.channel);
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
const formState = ref<FormState>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
@ -110,7 +118,10 @@ const onFinish = async (values: any) => {
|
|||
transport: 'URL',
|
||||
channel: 'fixed-media',
|
||||
};
|
||||
const resp = !!id ? await update({ ...params, id }) : await save(params);
|
||||
const resp =
|
||||
!!id && modeType !== 'add'
|
||||
? await update({ ...params, id })
|
||||
: await save(params);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功!');
|
||||
// if (params.get('save')) {
|
||||
|
@ -125,6 +136,15 @@ const onFinish = async (values: any) => {
|
|||
// }
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (modeType !== 'add') {
|
||||
formState.value = {
|
||||
name: props.data.name,
|
||||
description: props.data?.description || '',
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -138,7 +138,7 @@
|
|||
<div>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:model="formData"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item
|
||||
|
@ -146,7 +146,7 @@
|
|||
v-bind="validateInfos.name"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="form.name"
|
||||
v-model:value="formData.name"
|
||||
allowClear
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
|
@ -158,7 +158,7 @@
|
|||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="form.description"
|
||||
v-model:value="formData.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
|
@ -295,13 +295,26 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="steps-action">
|
||||
<a-button v-if="[0, 1].includes(current)" @click="next">
|
||||
<a-button
|
||||
v-if="[0, 1].includes(current)"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
<a-button v-if="current === 2" type="primary" @click="saveData">
|
||||
<a-button
|
||||
v-if="current === 2 && modeType !== 'view'"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="saveData"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||
<a-button
|
||||
v-if="type === 'child-device' ? current > 1 : current > 0"
|
||||
@click="prev"
|
||||
>
|
||||
上一步
|
||||
</a-button>
|
||||
</div>
|
||||
|
@ -524,7 +537,204 @@ const result2 = {
|
|||
'### 认证说明\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: '',
|
||||
};
|
||||
|
||||
//测试数据
|
||||
const networkData = {
|
||||
COAP_SERVER: [
|
||||
{
|
||||
id: '1620352949679960064',
|
||||
name: '前端测试1',
|
||||
description: '前端测试1',
|
||||
addresses: [
|
||||
{
|
||||
address: 'coap://111.0.0:88',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1613071630619607040',
|
||||
name: '1',
|
||||
addresses: [
|
||||
{
|
||||
address: 'coap://120.77.179.54:9000',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
UDP: [
|
||||
{
|
||||
id: '1590553821093437440',
|
||||
name: '194',
|
||||
addresses: [
|
||||
{
|
||||
address: 'udp://139.217.130.194:1883',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1585831257204301824',
|
||||
name: '测试隐藏集群',
|
||||
description: '111',
|
||||
addresses: [
|
||||
{
|
||||
address: 'udp://127.0.0.1:8080',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1584825665263149056',
|
||||
name: '1',
|
||||
addresses: [
|
||||
{
|
||||
address: 'udp://120.77.179.54:9000',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1551761481741672448',
|
||||
name: '0726UDP',
|
||||
description: '测试',
|
||||
addresses: [
|
||||
{
|
||||
address: 'udp://120.77.179.54:8088',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
TCP_SERVER: [
|
||||
{
|
||||
id: '1603206069979918336',
|
||||
name: '测试A',
|
||||
addresses: [
|
||||
{
|
||||
address: 'tcp://120.77.179.54:8106',
|
||||
health: -1,
|
||||
ok: false,
|
||||
bad: false,
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1603206069979918330',
|
||||
name: '测试AA',
|
||||
addresses: [
|
||||
{
|
||||
address: 'tcp://120.77.179.54:8106',
|
||||
health: -1,
|
||||
ok: false,
|
||||
bad: false,
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
MQTT_SERVER: [
|
||||
{
|
||||
id: '1585192878304051200',
|
||||
name: 'MQTT网络组件',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://120.77.179.54:8101',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1583268266806009856',
|
||||
name: '我的第一个MQTT服务组件',
|
||||
description: '',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://120.77.179.54:8100',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1570335308902912000',
|
||||
name: '0915MQTT网络组件_勿动',
|
||||
description: '测试,勿动!',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://120.77.179.54:8083',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1567062350140858368',
|
||||
name: '网络组件20220906160907',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://120.77.179.54:8083',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1556563257890742272',
|
||||
name: 'MQTT网络组件',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://0.0.0.0:8104',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1534774770408108032',
|
||||
name: 'MQTT',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://120.77.179.54:8088',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
function generateUUID() {
|
||||
var d = new Date().getTime();
|
||||
if (
|
||||
|
@ -555,6 +765,10 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
const clientHeight = document.body.clientHeight;
|
||||
const type = props.provider.channel;
|
||||
const route = useRoute();
|
||||
const modeType = route.params.type as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const useForm = Form.useForm;
|
||||
|
@ -569,29 +783,40 @@ const networkCurrent = ref('');
|
|||
const procotolCurrent = ref('');
|
||||
let config = ref({});
|
||||
let columnsMQTT = ref(<TableColumnType>[]);
|
||||
const form = reactive({
|
||||
const formData = ref({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(
|
||||
form,
|
||||
formData,
|
||||
reactive({
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
description: [{ max: 200, message: '最多可输入200个字符' }],
|
||||
}),
|
||||
);
|
||||
|
||||
const queryNetworkList = async (id: string, include: string, data = {}) => {
|
||||
if (NetworkTypeMapping.get(id) === 'MQTT_SERVER') {
|
||||
//使用测试数据
|
||||
networkList.value = networkData[NetworkTypeMapping.get(id)];
|
||||
// return;
|
||||
}
|
||||
const resp = await getNetworkList(
|
||||
NetworkTypeMapping.get(id),
|
||||
include,
|
||||
data,
|
||||
);
|
||||
if (resp.status === 200) {
|
||||
networkList.value = resp.result;
|
||||
//使用测试数据
|
||||
// networkList.value = resp.result;
|
||||
networkList.value =
|
||||
resp.result.length === 0
|
||||
? networkData[NetworkTypeMapping.get(id)]
|
||||
: resp.result;
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -686,7 +911,7 @@ const saveData = () => {
|
|||
channel: 'network', // 网络组件
|
||||
channelId: networkCurrent.value,
|
||||
};
|
||||
if (props.data && props.data.id) {
|
||||
if (!!id && modeType !== 'add') {
|
||||
resp = await update(params);
|
||||
} else {
|
||||
params = {
|
||||
|
@ -702,12 +927,13 @@ const saveData = () => {
|
|||
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'] })
|
||||
}
|
||||
// if (window.onTabSaveSuccess) {
|
||||
// window.onTabSaveSuccess(resp);
|
||||
// setTimeout(() => window.close(), 300);
|
||||
// } else {
|
||||
// // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
|
||||
// }
|
||||
history.back();
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
|
@ -781,7 +1007,7 @@ const next = async () => {
|
|||
];
|
||||
|
||||
// const resp =
|
||||
// props.provider.channel !== 'child-device'
|
||||
// type !== 'child-device'
|
||||
// ? await getConfigView(
|
||||
// procotolCurrent.value,
|
||||
// ProtocolMapping.get(props.provider.id),
|
||||
|
@ -864,7 +1090,7 @@ onMounted(() => {
|
|||
}
|
||||
} else {
|
||||
if (props.provider?.id) {
|
||||
if (props.provider.channel !== 'child-device') {
|
||||
if (type !== 'child-device') {
|
||||
queryNetworkList(props.provider.id, '');
|
||||
steps.value = ['网络组件', '消息协议', '完成'];
|
||||
current.value = 0;
|
||||
|
@ -877,14 +1103,20 @@ onMounted(() => {
|
|||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (modeType !== 'add') {
|
||||
procotolCurrent.value = props.data.protocol;
|
||||
formData.value = {
|
||||
name: props.data.name,
|
||||
description: props.data.description,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
current,
|
||||
(v) => {
|
||||
if (props.provider.channel !== 'child-device') {
|
||||
stepCurrent.value = v;
|
||||
} else {
|
||||
stepCurrent.value = v - 1;
|
||||
}
|
||||
stepCurrent.value = type === 'child-device' ? v - 1 : v;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
|
|
|
@ -44,8 +44,13 @@
|
|||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<h3 class="card-item-content-title">
|
||||
<a href="">{{ slotProps.name }}</a>
|
||||
<h3
|
||||
@click="handlEye(slotProps.id)"
|
||||
class="card-item-content-title"
|
||||
>
|
||||
<a class="card-item-content-title-a">{{
|
||||
slotProps.name
|
||||
}}</a>
|
||||
</h3>
|
||||
<a-row class="card-item-content-box">
|
||||
<a-col
|
||||
|
@ -110,15 +115,19 @@
|
|||
<a-tooltip>
|
||||
<template #title>
|
||||
{{
|
||||
providersList.find(
|
||||
slotProps.description
|
||||
? slotProps.description
|
||||
: providersList.find(
|
||||
(item) =>
|
||||
item.id ===
|
||||
slotProps.provider,
|
||||
)?.description
|
||||
}}</template
|
||||
>
|
||||
}}
|
||||
</template>
|
||||
{{
|
||||
providersList.find(
|
||||
slotProps.description
|
||||
? slotProps.description
|
||||
: providersList.find(
|
||||
(item) =>
|
||||
item.id ===
|
||||
slotProps.provider,
|
||||
|
@ -184,7 +193,13 @@
|
|||
<script lang="ts" setup name="AccessConfigPage">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { list, getProviders } from '@/api/link/accessConfig';
|
||||
import {
|
||||
list,
|
||||
getProviders,
|
||||
remove,
|
||||
undeploy,
|
||||
deploy,
|
||||
} from '@/api/link/accessConfig';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
|
@ -261,9 +276,8 @@ const columns = [
|
|||
];
|
||||
|
||||
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
if (!data) return [];
|
||||
const state = data.state.value;
|
||||
return [
|
||||
{
|
||||
key: 'edit',
|
||||
|
@ -276,15 +290,47 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
|||
handlEdit(data.id);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'action',
|
||||
text: state === 'enabled' ? '禁用' : '启用',
|
||||
tooltip: {
|
||||
title: state === 'enabled' ? '禁用' : '启用',
|
||||
},
|
||||
icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
|
||||
popConfirm: {
|
||||
title: `确认${state === 'enabled' ? '禁用' : '启用'}?`,
|
||||
onConfirm: async () => {
|
||||
let res =
|
||||
state === 'enabled'
|
||||
? await undeploy(data.id)
|
||||
: await deploy(data.id);
|
||||
|
||||
if (res.success) {
|
||||
message.success('操作成功');
|
||||
tableRef.value?.reload();
|
||||
} else {
|
||||
message.error('操作失败!');
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: '删除',
|
||||
disabled: state === 'enabled',
|
||||
tooltip: {
|
||||
title: state === 'enabled' ? '已启用的设备不能删除' : '删除',
|
||||
},
|
||||
popConfirm: {
|
||||
title: '确认删除?',
|
||||
okText: ' 确定',
|
||||
cancelText: '取消',
|
||||
onConfirm: async () => {
|
||||
handlDelete(data.id);
|
||||
const res = await remove(data.id);
|
||||
if (res.success) {
|
||||
message.success('操作成功');
|
||||
tableRef.value.reload();
|
||||
} else {
|
||||
message.error('操作失败!');
|
||||
}
|
||||
},
|
||||
},
|
||||
icon: 'DeleteOutlined',
|
||||
|
@ -299,21 +345,13 @@ const getProvidersList = async () => {
|
|||
getProvidersList();
|
||||
|
||||
const handlAdd = () => {
|
||||
router.push('/link/accessConfig/detail/add');
|
||||
|
||||
// router.push('/link/certificate/detail/add/new');
|
||||
router.push('/link/accessConfig/detail/add/new');
|
||||
};
|
||||
|
||||
const handlEdit = (id: string) => {
|
||||
router.push(`/link/certificate/detail/edit/${id}`);
|
||||
router.push(`/link/accessConfig/detail/edit/${id}`);
|
||||
};
|
||||
|
||||
const handlDelete = async (id: string) => {
|
||||
const res = await remove(id);
|
||||
if (res.success) {
|
||||
message.success('操作成功');
|
||||
tableRef.value.reload();
|
||||
}
|
||||
const handlEye = (id: string) => {
|
||||
router.push(`/link/accessConfig/detail/view/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -356,6 +394,14 @@ const handleSearch = (e: any) => {
|
|||
.card-item-content {
|
||||
min-height: 100px;
|
||||
|
||||
.card-item-content-title-a {
|
||||
// color: #000 !important;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
}
|
||||
.card-item-content-box {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
v-if="type !== 'view'"
|
||||
v-if="modeType !== 'view'"
|
||||
class="form-submit"
|
||||
html-type="submit"
|
||||
type="primary"
|
||||
|
@ -103,7 +103,7 @@ import { FormDataType, TypeObjType } from '../type';
|
|||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const type = route.params.type as string;
|
||||
const modeType = route.params.type as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
@ -145,7 +145,7 @@ const onSubmit = () => {
|
|||
const params = toRaw(formData.value);
|
||||
loading.value = true;
|
||||
const response =
|
||||
type === 'edit' ? await update(params) : await save(params);
|
||||
modeType === 'edit' ? await update(params) : await save(params);
|
||||
if (response.status === 200) {
|
||||
message.success('操作成功');
|
||||
router.push('/link/certificate');
|
||||
|
@ -168,7 +168,7 @@ const handleChange = (info: UploadChangeParam) => {
|
|||
};
|
||||
|
||||
const detail = async (id: string) => {
|
||||
if (type !== 'add') {
|
||||
if (modeType !== 'add') {
|
||||
loading.value = true;
|
||||
const res = await queryDetail(id);
|
||||
if (res.success) {
|
||||
|
|
Loading…
Reference in New Issue