style: 设备接入网关样式微调
This commit is contained in:
jackhoo_98
parent
fec6852bc4
commit
c61eb1771e
|
|
@ -1,91 +1,73 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div v-if="type === 'channel'" class="card-last">
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="12">
|
||||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<j-form
|
||||
:model="formState"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
@finish="onFinish"
|
||||
<div v-if="type === 'channel'" class="card-last">
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="12">
|
||||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<j-form
|
||||
:model="formState"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
@finish="onFinish"
|
||||
>
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="formState.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item label="说明" name="description">
|
||||
<j-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="formState.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item>
|
||||
<PermissionButton
|
||||
v-if="view === 'false'"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
:hasPermission="`link/AccessConfig:${
|
||||
id === ':id' ? 'add' : 'update'
|
||||
}`"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="formState.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item label="说明" name="description">
|
||||
<j-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="formState.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item>
|
||||
<PermissionButton
|
||||
v-if="view === 'false'"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
:hasPermission="`link/AccessConfig:${
|
||||
id === ':id' ? 'add' : 'update'
|
||||
}`"
|
||||
>
|
||||
保存
|
||||
</PermissionButton>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-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>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
保存
|
||||
</PermissionButton>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="doc" style="height: 600px">
|
||||
<TitleComponent data="配置概览" />
|
||||
<p>接入方式：{{ provider.name }}</p>
|
||||
<p>
|
||||
{{ provider.description }}
|
||||
</p>
|
||||
<p>消息协议：{{ provider.id }}</p>
|
||||
<TitleComponent data="设备接入指引" />
|
||||
<p>1、配置{{ provider.name }}通道</p>
|
||||
<p>2、创建{{ provider.name }}设备接入网关</p>
|
||||
<p>3、创建产品，并选中接入方式为{{ provider.name }}</p>
|
||||
<p>4、添加设备，单独为每一个设备进行数据点绑定</p>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -147,31 +129,9 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.config-right {
|
||||
padding: 20px;
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div>
|
||||
<j-steps class="steps-steps" :current="stepCurrent">
|
||||
<j-step v-for="item in steps" :key="item" :title="item" />
|
||||
</j-steps>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<AIcon type="InfoCircleOutlined" />
|
||||
通过CTWing平台的HTTP推送服务进行数据接入
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<div style="margin-top: 42px">
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="16">
|
||||
<j-form
|
||||
|
|
@ -86,7 +86,6 @@
|
|||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12"> </j-col>
|
||||
</j-row>
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="24">
|
||||
|
|
@ -116,7 +115,10 @@
|
|||
</div>
|
||||
<div>
|
||||
2、CTWing端配置产品/设备/分组级订阅，订阅方URL地址请填写:
|
||||
<div style="word-wrap: break-word">
|
||||
<div
|
||||
class="url"
|
||||
style="word-wrap: break-word"
|
||||
>
|
||||
{{
|
||||
`${origin}/api/ctwing/${randomString()}/notify`
|
||||
}}
|
||||
|
|
@ -181,23 +183,19 @@
|
|||
新增
|
||||
</PermissionButton>
|
||||
</div>
|
||||
<j-scrollbar height="500">
|
||||
<j-row
|
||||
:gutter="[24, 24]"
|
||||
v-if="procotolList.length > 0"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
<j-scrollbar height="480">
|
||||
<j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||
<j-col
|
||||
:span="8"
|
||||
v-for="item in procotolList"
|
||||
:key="item.id"
|
||||
>
|
||||
<access-card
|
||||
<AccessCard
|
||||
@checkedChange="procotolChange"
|
||||
:checked="procotolCurrent"
|
||||
:data="item"
|
||||
>
|
||||
</access-card>
|
||||
</AccessCard>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-empty v-else description="暂无数据" />
|
||||
|
|
@ -207,79 +205,69 @@
|
|||
<div v-if="current === 2" class="card-last">
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="12">
|
||||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<j-form
|
||||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
ref="formRef2"
|
||||
<TitleComponent data="基本信息" />
|
||||
<j-form
|
||||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
ref="formRef2"
|
||||
>
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="formData.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item label="说明" name="description">
|
||||
<j-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="formData.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</div>
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="formData.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item label="说明" name="description">
|
||||
<j-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="formData.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</j-col>
|
||||
<j-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">
|
||||
消息协议：{{ procotolCurrent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-right-item">
|
||||
<title-component data="设备接入指引" />
|
||||
<div class="config-right-item-context">
|
||||
1、创建类型为{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing'
|
||||
}}的设备接入网关
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
2、创建产品，并选中接入方式为
|
||||
{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
|
||||
}}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
3、添加设备，为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中填写的值一致，若OneNet平台没有对应的设备，将会通过OneNet平台提供的LWM2M协议自动创建）
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc" style="height: 606px">
|
||||
<TitleComponent data="配置概览" />
|
||||
<p>接入方式：{{ provider.name }}</p>
|
||||
<p>
|
||||
{{ provider.description }}
|
||||
</p>
|
||||
<p>消息协议：{{ procotolCurrent }}</p>
|
||||
<TitleComponent data="设备接入指引" />
|
||||
<p>
|
||||
1、创建类型为{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing'
|
||||
}}的设备接入网关
|
||||
</p>
|
||||
<p>
|
||||
2、创建产品，并选中接入方式为
|
||||
{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
3、添加设备，为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中填写的值一致，若OneNet平台没有对应的设备，将会通过OneNet平台提供的LWM2M协议自动创建）
|
||||
</p>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
|
@ -481,12 +469,8 @@ watch(
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.steps-box {
|
||||
min-height: 400px;
|
||||
|
|
@ -501,7 +485,6 @@ watch(
|
|||
.steps-action {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.steps-action-save {
|
||||
margin-left: 0;
|
||||
|
|
@ -518,52 +501,4 @@ watch(
|
|||
margin: 15px 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.config-right {
|
||||
padding: 20px;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc {
|
||||
height: 550px;
|
||||
padding: 24px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
font-size: 14px;
|
||||
background-color: #fafafa;
|
||||
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: rgba(#000, 0.85);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div>
|
||||
<j-steps class="steps-steps" :current="stepCurrent">
|
||||
<j-step v-for="item in steps" :key="item" :title="item" />
|
||||
</j-steps>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<AIcon type="InfoCircleOutlined" />
|
||||
通过OneNet平台的HTTP推送服务进行数据接入
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<div style="margin-top: 42px">
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="16">
|
||||
<j-form
|
||||
|
|
@ -265,23 +265,19 @@
|
|||
新增
|
||||
</PermissionButton>
|
||||
</div>
|
||||
<j-scrollbar height="500">
|
||||
<j-row
|
||||
:gutter="[24, 24]"
|
||||
v-if="procotolList.length > 0"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
<j-scrollbar height="480">
|
||||
<j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||
<j-col
|
||||
:span="8"
|
||||
v-for="item in procotolList"
|
||||
:key="item.id"
|
||||
>
|
||||
<access-card
|
||||
<AccessCard
|
||||
@checkedChange="procotolChange"
|
||||
:checked="procotolCurrent"
|
||||
:data="item"
|
||||
>
|
||||
</access-card>
|
||||
</AccessCard>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-empty v-else description="暂无数据" />
|
||||
|
|
@ -330,40 +326,32 @@
|
|||
</div>
|
||||
</j-col>
|
||||
<j-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">
|
||||
消息协议：{{ procotolCurrent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-right-item">
|
||||
<title-component data="设备接入指引" />
|
||||
<div class="config-right-item-context">
|
||||
1、创建类型为{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing'
|
||||
}}的设备接入网关
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
2、创建产品，并选中接入方式为
|
||||
{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
|
||||
}}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
3、添加设备，为每一台设备设置唯一的IMEI、SN、IMSI、PSK码（需与CTWingt平台中填写的值一致，若CTWing平台没有对应的设备，将会通过CTWing平台提供的LWM2M协议自动创建）
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc" style="height: 606px">
|
||||
<TitleComponent data="配置概览" />
|
||||
<p>接入方式：{{ provider.name }}</p>
|
||||
<p>
|
||||
{{ provider.description }}
|
||||
</p>
|
||||
<p>消息协议：{{ procotolCurrent }}</p>
|
||||
<TitleComponent data="设备接入指引" />
|
||||
<p>
|
||||
1、创建类型为{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing'
|
||||
}}的设备接入网关
|
||||
</p>
|
||||
<p>
|
||||
2、创建产品，并选中接入方式为
|
||||
{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
3、添加设备，为每一台设备设置唯一的IMEI、SN、IMSI、PSK码（需与CTWingt平台中填写的值一致，若CTWing平台没有对应的设备，将会通过CTWing平台提供的LWM2M协议自动创建）
|
||||
</p>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
|
@ -567,12 +555,8 @@ watch(
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.steps-box {
|
||||
min-height: 400px;
|
||||
|
|
@ -586,7 +570,6 @@ watch(
|
|||
.steps-action {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.steps-action-save {
|
||||
margin-left: 0;
|
||||
|
|
@ -609,54 +592,9 @@ watch(
|
|||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.config-right {
|
||||
padding: 20px;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc {
|
||||
height: 550px;
|
||||
padding: 24px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
font-size: 14px;
|
||||
background-color: #fafafa;
|
||||
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: rgba(#000, 0.85);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
.form-label {
|
||||
height: 30px;
|
||||
padding-bottom: 8px;
|
||||
.form-label-required {
|
||||
color: red;
|
||||
margin: 0 4px 0 -2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-if="type === 'edge'" class="container">
|
||||
<div v-if="type === 'edge'">
|
||||
<j-steps
|
||||
v-if="channel !== 'edge-child-device'"
|
||||
class="steps-steps"
|
||||
|
|
@ -29,12 +29,8 @@
|
|||
新增
|
||||
</PermissionButton>
|
||||
</div>
|
||||
<j-scrollbar height="500">
|
||||
<j-row
|
||||
:gutter="[24, 24]"
|
||||
v-if="networkList.length > 0"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
<j-scrollbar height="480">
|
||||
<j-row :gutter="[24, 24]" v-if="networkList.length > 0">
|
||||
<j-col
|
||||
:span="8"
|
||||
v-for="item in networkList"
|
||||
|
|
@ -66,11 +62,7 @@
|
|||
class="item"
|
||||
>
|
||||
<j-badge
|
||||
:color="
|
||||
i.health === -1
|
||||
? 'red'
|
||||
: 'green'
|
||||
"
|
||||
:status="getColor(i)"
|
||||
/>{{ i.address }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,11 +74,7 @@
|
|||
class="item"
|
||||
>
|
||||
<j-badge
|
||||
:color="
|
||||
i.health === -1
|
||||
? 'red'
|
||||
: 'green'
|
||||
"
|
||||
:status="getColor(i)"
|
||||
:text="i.address"
|
||||
/>
|
||||
<span
|
||||
|
|
@ -163,19 +151,13 @@
|
|||
</j-form>
|
||||
</j-col>
|
||||
<j-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="doc" style="height: 600px">
|
||||
<TitleComponent data="配置概览" />
|
||||
<p>接入方式：{{ provider.name }}</p>
|
||||
<p>
|
||||
{{ provider.description }}
|
||||
</p>
|
||||
<p>消息协议：{{ provider.id }}</p>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
|
@ -278,6 +260,7 @@ const onFinish = async (values: any) => {
|
|||
const checkedChange = (id: string) => {
|
||||
networkCurrent.value = id;
|
||||
};
|
||||
const getColor = (i: any) => (i.health === -1 ? 'error' : 'processing');
|
||||
|
||||
const queryNetworkList = async (id: string, include: string, data = {}) => {
|
||||
const resp = await getNetworkList(
|
||||
|
|
@ -359,12 +342,8 @@ watch(
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.steps-box {
|
||||
min-height: 400px;
|
||||
|
|
@ -378,7 +357,6 @@ watch(
|
|||
.steps-action {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.steps-action-save {
|
||||
margin-left: 0;
|
||||
|
|
|
|||
|
|
@ -9,421 +9,397 @@
|
|||
<AIcon type="InfoCircleOutlined" />
|
||||
配置设备信令参数
|
||||
</div>
|
||||
<div>
|
||||
<j-form
|
||||
:model="formState"
|
||||
ref="formRef1"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
|
||||
<j-form
|
||||
:model="formState"
|
||||
ref="formRef1"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
>
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="SIP 域"
|
||||
name="domain"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入SIP 域',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="formState.domain"
|
||||
placeholder="请输入SIP 域"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="SIP ID"
|
||||
name="sipId"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入SIP ID',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="formState.sipId"
|
||||
placeholder="请输入SIP ID"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
||||
<j-form-item
|
||||
name="shareCluster"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择集群',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
集群
|
||||
<j-tooltip
|
||||
title="共享配置:集群下所有节点共用同一配置,独立配置:集群下不同节点使用不同配置"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-radio-group v-model:value="formState.shareCluster">
|
||||
<j-radio :value="true">共享配置</j-radio>
|
||||
<j-radio :value="false">独立配置</j-radio>
|
||||
</j-radio-group>
|
||||
</j-form-item>
|
||||
<div v-if="formState.shareCluster" class="form-item1">
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="12">
|
||||
<j-col :span="6">
|
||||
<j-form-item
|
||||
label="SIP 域"
|
||||
name="domain"
|
||||
label="SIP 地址"
|
||||
:name="['hostPort', 'host']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入SIP 域',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
message: '请选择SIP地址',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="formState.domain"
|
||||
placeholder="请输入SIP 域"
|
||||
<j-select
|
||||
v-model:value="formState.hostPort.host"
|
||||
style="width: 105%"
|
||||
:disabled="true"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
>
|
||||
<j-select-option value="0.0.0.0"
|
||||
>0.0.0.0</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="6">
|
||||
<j-form-item
|
||||
:name="['hostPort', 'port']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
|
||||
<j-select
|
||||
v-model:value="formState.hostPort.port"
|
||||
:options="sipList"
|
||||
placeholder="请选择端口"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-col :span="6">
|
||||
<j-form-item
|
||||
label="SIP ID"
|
||||
name="sipId"
|
||||
label="公网 Host"
|
||||
:name="['hostPort', 'publicHost']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入SIP ID',
|
||||
message: '请输入IP地址',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
pattern:
|
||||
/^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
|
||||
message: '请输入正确的IP地址',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="formState.sipId"
|
||||
placeholder="请输入SIP ID"
|
||||
style="width: 105%"
|
||||
v-model:value="
|
||||
formState.hostPort.publicHost
|
||||
"
|
||||
placeholder="请输入IP地址"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="6">
|
||||
<j-form-item
|
||||
:name="['hostPort', 'publicPort']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '输入端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
placeholder="请输入端口"
|
||||
v-model:value="
|
||||
formState.hostPort.publicPort
|
||||
"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
||||
<j-form-item
|
||||
name="shareCluster"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择集群',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
集群
|
||||
<j-tooltip
|
||||
title="共享配置:集群下所有节点共用同一配置,独立配置:集群下不同节点使用不同配置"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-radio-group
|
||||
v-model:value="formState.shareCluster"
|
||||
>
|
||||
<j-radio :value="true">共享配置</j-radio>
|
||||
<j-radio :value="false">独立配置</j-radio>
|
||||
</j-radio-group>
|
||||
</j-form-item>
|
||||
<div v-if="formState.shareCluster" class="form-item1">
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="6">
|
||||
<j-form-item
|
||||
label="SIP 地址"
|
||||
:name="['hostPort', 'host']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择SIP地址',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-select
|
||||
v-model:value="
|
||||
formState.hostPort.host
|
||||
"
|
||||
style="width: 105%"
|
||||
:disabled="true"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
>
|
||||
<j-select-option value="0.0.0.0"
|
||||
>0.0.0.0</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="6">
|
||||
<j-form-item
|
||||
:name="['hostPort', 'port']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
|
||||
<j-select
|
||||
v-model:value="
|
||||
formState.hostPort.port
|
||||
"
|
||||
:options="sipList"
|
||||
placeholder="请选择端口"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="6">
|
||||
<j-form-item
|
||||
label="公网 Host"
|
||||
:name="['hostPort', 'publicHost']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入IP地址',
|
||||
},
|
||||
{
|
||||
pattern:
|
||||
/^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
|
||||
message: '请输入正确的IP地址',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
style="width: 105%"
|
||||
v-model:value="
|
||||
formState.hostPort.publicHost
|
||||
"
|
||||
placeholder="请输入IP地址"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="6">
|
||||
<j-form-item
|
||||
:name="['hostPort', 'publicPort']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '输入端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
placeholder="请输入端口"
|
||||
v-model:value="
|
||||
formState.hostPort.publicPort
|
||||
"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</j-form>
|
||||
<div v-if="!formState.shareCluster">
|
||||
<j-form
|
||||
ref="formRef2"
|
||||
layout="vertical"
|
||||
name="dynamic_form_nest_item"
|
||||
:model="dynamicValidateForm"
|
||||
>
|
||||
<div
|
||||
v-for="(
|
||||
cluster, index
|
||||
) in dynamicValidateForm.cluster"
|
||||
:key="cluster.id"
|
||||
>
|
||||
<j-collapse v-model:activeKey="activeKey">
|
||||
<j-collapse-panel
|
||||
:key="cluster.id"
|
||||
:header="`#${index + 1}.节点`"
|
||||
>
|
||||
<template #extra>
|
||||
<AIcon
|
||||
@click="removeCluster(cluster)"
|
||||
type="DeleteOutlined"
|
||||
/>
|
||||
</template>
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="8">
|
||||
<j-form-item
|
||||
label="节点名称"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'clusterNodeId',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择节点名称',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
v-model:value="
|
||||
cluster.clusterNodeId
|
||||
"
|
||||
:options="clustersList"
|
||||
placeholder="请选择节点名称"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'host',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择SIP 地址',
|
||||
}"
|
||||
>
|
||||
<div class="form-label">
|
||||
SIP 地址
|
||||
<span
|
||||
class="form-label-required"
|
||||
>*</span
|
||||
>
|
||||
<j-tooltip>
|
||||
<template #title>
|
||||
<p>
|
||||
绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
|
||||
</p>
|
||||
</template>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
|
||||
<j-select
|
||||
v-model:value="
|
||||
cluster.host
|
||||
"
|
||||
:options="sipListOption"
|
||||
placeholder="请选择IP地址"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
style="width: 110%"
|
||||
@change="
|
||||
handleChangeForm2Sip(
|
||||
index,
|
||||
)
|
||||
"
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'port',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择端口',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="form-label"
|
||||
></div>
|
||||
<j-select
|
||||
v-model:value="
|
||||
cluster.port
|
||||
"
|
||||
:options="
|
||||
sipListIndex[index]
|
||||
"
|
||||
placeholder="请选择端口"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'publicHost',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message:
|
||||
'请输入公网 Host',
|
||||
},
|
||||
{
|
||||
pattern:
|
||||
/^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
|
||||
message:
|
||||
'请输入正确的IP地址',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label">
|
||||
公网 Host
|
||||
<span
|
||||
class="form-label-required"
|
||||
>*</span
|
||||
>
|
||||
<j-tooltip>
|
||||
<template #title>
|
||||
<p>
|
||||
监听指定端口的请求
|
||||
</p>
|
||||
</template>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
<j-input
|
||||
style="width: 110%"
|
||||
v-model:value="
|
||||
cluster.publicHost
|
||||
"
|
||||
placeholder="请输入IP地址"
|
||||
allowClear
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'publicPort',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message:
|
||||
'请输入端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div
|
||||
class="form-label"
|
||||
></div>
|
||||
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
placeholder="请输入端口"
|
||||
v-model:value="
|
||||
cluster.publicPort
|
||||
"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
</div>
|
||||
<j-form-item>
|
||||
<j-button
|
||||
style="margin-top: 10px"
|
||||
type="dashed"
|
||||
block
|
||||
@click="addCluster"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />
|
||||
新增
|
||||
</j-button>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</div>
|
||||
</j-form>
|
||||
<div v-if="!formState.shareCluster">
|
||||
<j-form
|
||||
ref="formRef2"
|
||||
layout="vertical"
|
||||
name="dynamic_form_nest_item"
|
||||
:model="dynamicValidateForm"
|
||||
>
|
||||
<div
|
||||
v-for="(
|
||||
cluster, index
|
||||
) in dynamicValidateForm.cluster"
|
||||
:key="cluster.id"
|
||||
>
|
||||
<j-collapse v-model:activeKey="activeKey">
|
||||
<j-collapse-panel
|
||||
:key="cluster.id"
|
||||
:header="`#${index + 1}.节点`"
|
||||
>
|
||||
<template #extra>
|
||||
<span
|
||||
@click="removeCluster(cluster)"
|
||||
class="delete-btn"
|
||||
>删除</span
|
||||
>
|
||||
</template>
|
||||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="8">
|
||||
<j-form-item
|
||||
label="节点名称"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'clusterNodeId',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择节点名称',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
v-model:value="
|
||||
cluster.clusterNodeId
|
||||
"
|
||||
:options="clustersList"
|
||||
placeholder="请选择节点名称"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'host',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择SIP 地址',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
SIP 地址
|
||||
<j-tooltip
|
||||
title="到服务器上的网卡地址,绑定到所有网卡:0.0.0.0"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
|
||||
<j-select
|
||||
v-model:value="cluster.host"
|
||||
:options="sipListOption"
|
||||
placeholder="请选择IP地址"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
style="width: 110%"
|
||||
@change="
|
||||
handleChangeForm2Sip(
|
||||
index,
|
||||
)
|
||||
"
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'port',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择端口',
|
||||
}"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
<j-select
|
||||
v-model:value="cluster.port"
|
||||
:options="
|
||||
sipListIndex[index]
|
||||
"
|
||||
placeholder="请选择端口"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'publicHost',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message:
|
||||
'请输入公网 Host',
|
||||
},
|
||||
{
|
||||
pattern:
|
||||
/^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
|
||||
message:
|
||||
'请输入正确的IP地址',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
公网 Host
|
||||
<j-tooltip
|
||||
title="监听指定端口的请求"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-input
|
||||
style="width: 110%"
|
||||
v-model:value="
|
||||
cluster.publicHost
|
||||
"
|
||||
placeholder="请输入IP地址"
|
||||
allowClear
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'publicPort',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
placeholder="请输入端口"
|
||||
v-model:value="
|
||||
cluster.publicPort
|
||||
"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
</div>
|
||||
<j-form-item>
|
||||
<j-button
|
||||
style="margin-top: 10px"
|
||||
type="primary"
|
||||
block
|
||||
ghost
|
||||
@click="addCluster"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />
|
||||
新增
|
||||
</j-button>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-box" v-else>
|
||||
|
|
@ -465,30 +441,22 @@
|
|||
</div>
|
||||
</j-col>
|
||||
<j-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>
|
||||
{{
|
||||
provider?.id === 'fixed-media'
|
||||
? 'URL'
|
||||
: 'SIP'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc" style="height: 400px">
|
||||
<h1>接入方式</h1>
|
||||
<p>
|
||||
{{ provider.name }}
|
||||
</p>
|
||||
<p>
|
||||
{{ provider.description }}
|
||||
</p>
|
||||
<h1>消息协议</h1>
|
||||
<p>
|
||||
{{
|
||||
provider?.id === 'fixed-media'
|
||||
? 'URL'
|
||||
: 'SIP'
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
|
@ -625,7 +593,7 @@ const filterOption = (input: string, option: any) => {
|
|||
};
|
||||
|
||||
const handleChangeForm2Sip = (index: number) => {
|
||||
dynamicValidateForm.cluster[index].port = '';
|
||||
dynamicValidateForm.cluster[index].port = undefined;
|
||||
const value = dynamicValidateForm.cluster[index].host;
|
||||
sipListIndex.value[index] = sipListConst
|
||||
.find((i: any) => i.host === value)
|
||||
|
|
@ -800,27 +768,6 @@ watch(
|
|||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item1 {
|
||||
background-color: #f6f6f6;
|
||||
padding: 10px;
|
||||
|
|
@ -828,9 +775,13 @@ watch(
|
|||
.form-label {
|
||||
height: 30px;
|
||||
padding-bottom: 8px;
|
||||
.form-label-required {
|
||||
color: red;
|
||||
margin: 0 4px 0 -2px;
|
||||
}
|
||||
}
|
||||
.delete-btn {
|
||||
display: inline-block;
|
||||
color: #e50012;
|
||||
padding: 0px 8px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e50012;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -54,26 +54,18 @@
|
|||
</div>
|
||||
</j-col>
|
||||
<j-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 class="doc">
|
||||
<h1>接入方式</h1>
|
||||
<p>
|
||||
{{ provider.name }}
|
||||
</p>
|
||||
<p>
|
||||
{{ provider.description }}
|
||||
</p>
|
||||
<h1>消息协议</h1>
|
||||
<p>
|
||||
{{ provider.id === 'fixed-media' ? 'URL' : 'SIP' }}
|
||||
</p>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
|
@ -149,24 +141,4 @@ onMounted(() => {
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
新增
|
||||
</PermissionButton>
|
||||
</div>
|
||||
<j-scrollbar height="480" style="padding-right: 8px">
|
||||
<j-scrollbar height="480">
|
||||
<j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||
<j-col
|
||||
:span="8"
|
||||
|
|
@ -171,32 +171,25 @@
|
|||
<j-col :span="12">
|
||||
<j-scrollbar height="580">
|
||||
<div class="doc">
|
||||
<div>
|
||||
<h1>接入方式</h1>
|
||||
<p>
|
||||
{{ provider.name }}
|
||||
</p>
|
||||
<p>
|
||||
{{ provider.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1>消息协议</h1>
|
||||
<p>
|
||||
{{
|
||||
procotolList.find(
|
||||
(i: any) =>
|
||||
i.id ===
|
||||
procotolCurrent,
|
||||
).name
|
||||
}}
|
||||
</p>
|
||||
<p v-if="config.document">
|
||||
<Markdown
|
||||
:source="config.document"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<h1>接入方式</h1>
|
||||
<p>
|
||||
{{ provider.name }}
|
||||
</p>
|
||||
<p>
|
||||
{{ provider.description }}
|
||||
</p>
|
||||
<h1>消息协议</h1>
|
||||
<p>
|
||||
{{
|
||||
procotolList.find(
|
||||
(i: any) =>
|
||||
i.id === procotolCurrent,
|
||||
).name
|
||||
}}
|
||||
</p>
|
||||
<p v-if="config.document">
|
||||
<Markdown :source="config.document" />
|
||||
</p>
|
||||
<div v-if="getNetworkCurrent()">
|
||||
<h1>网络组件</h1>
|
||||
<p
|
||||
|
|
@ -238,7 +231,7 @@
|
|||
? columnsMQTT
|
||||
: columnsHTTP
|
||||
"
|
||||
:scroll="{ y: 300 }"
|
||||
:scroll="{ y: 400 }"
|
||||
>
|
||||
<template
|
||||
#bodyCell="{
|
||||
|
|
@ -445,8 +438,6 @@ const getNetworkCurrentData = () =>
|
|||
const getColor = (i: any) => (i.health === -1 ? 'error' : 'processing');
|
||||
|
||||
const getStream = (record: any) => {
|
||||
console.log(222, record);
|
||||
|
||||
let stream = '';
|
||||
if (record.upstream && record.downstream) stream = '上行、下行';
|
||||
else if (record.upstream) stream = '上行';
|
||||
|
|
@ -623,7 +614,7 @@ watch(
|
|||
|
||||
<style lang="less" scoped>
|
||||
.steps-content {
|
||||
margin: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.steps-box {
|
||||
min-height: 400px;
|
||||
|
|
@ -636,7 +627,6 @@ watch(
|
|||
.steps-action {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.alert {
|
||||
height: 40px;
|
||||
|
|
@ -664,25 +654,4 @@ watch(
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue