Merge pull request #65 from jetlinks/dev-hub
style: 设备接入网关、网络组件以及详情样式微调
This commit is contained in:
commit
acae0936dc
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="title" :style="style">
|
||||
<span class="titleData">{{ data }}</span>
|
||||
<div class="title-content">{{ data }}</div>
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -22,27 +22,28 @@ const props = defineProps({
|
|||
|
||||
<style lang="less" scoped>
|
||||
.title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
.titleData {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 12px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
bottom: 0.5px;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 80%;
|
||||
background-color: @primary-color;
|
||||
content: '';
|
||||
margin-bottom: 16px;
|
||||
|
||||
.title-content {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: @primary-color;
|
||||
border-radius: 0 3px 3px 0;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,14 +1,19 @@
|
|||
<template>
|
||||
<j-card
|
||||
hoverable
|
||||
:class="['card-render', checked === data.id ? 'checked' : '']"
|
||||
:class="[
|
||||
'card-render',
|
||||
'container',
|
||||
checked === data.id ? 'checked' : '',
|
||||
]"
|
||||
@click="checkedChange(data.id)"
|
||||
>
|
||||
<div class="title">
|
||||
<j-tooltip placement="topLeft" :title="data.name">{{
|
||||
data.name
|
||||
}}</j-tooltip>
|
||||
<Ellipsis style="width: calc(100% - 100px); margin-bottom: 24px">
|
||||
{{ data.name }}
|
||||
</Ellipsis>
|
||||
</div>
|
||||
|
||||
<slot name="other"></slot>
|
||||
<div class="desc">
|
||||
<j-tooltip placement="topLeft" :title="data.description">{{
|
||||
|
@ -46,16 +51,18 @@ const checkedChange = (id: string) => {
|
|||
.card-render {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: url('/public/images/access.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 120px;
|
||||
|
||||
// background: url('/public/images/access.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
height: 140px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #e6e6e6;
|
||||
.title {
|
||||
width: calc(100% - 88px);
|
||||
overflow: hidden;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.desc {
|
||||
|
@ -78,8 +85,7 @@ const checkedChange = (id: string) => {
|
|||
width: 44px;
|
||||
height: 44px;
|
||||
color: #fff;
|
||||
background-color: red;
|
||||
background-color: #2f54eb;
|
||||
background-color: @primary-color;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
> div {
|
||||
|
@ -92,11 +98,16 @@ const checkedChange = (id: string) => {
|
|||
}
|
||||
&.checked {
|
||||
position: relative;
|
||||
color: #2f54eb;
|
||||
border-color: #2f54eb;
|
||||
color: @primary-color;
|
||||
border-color: @primary-color;
|
||||
z-index: 0;
|
||||
.checked-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.container {
|
||||
background: url('/public/images/access-icon.png') no-repeat;
|
||||
background-position: bottom right;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -26,11 +26,7 @@
|
|||
</PermissionButton>
|
||||
</div>
|
||||
<j-scrollbar height="480">
|
||||
<j-row
|
||||
:gutter="[24, 24]"
|
||||
v-if="networkList.length > 0"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
<j-row :gutter="[24, 24]" v-if="networkList.length > 0">
|
||||
<j-col
|
||||
:span="8"
|
||||
v-for="item in networkList"
|
||||
|
@ -62,7 +58,7 @@
|
|||
class="item"
|
||||
>
|
||||
<j-badge
|
||||
:color="getColor(i)"
|
||||
:status="getColor(i)"
|
||||
/>{{ i.address }}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -74,7 +70,7 @@
|
|||
class="item"
|
||||
>
|
||||
<j-badge
|
||||
:color="getColor(i)"
|
||||
:status="getColor(i)"
|
||||
:text="i.address"
|
||||
/>
|
||||
<span
|
||||
|
@ -116,11 +112,7 @@
|
|||
</PermissionButton>
|
||||
</div>
|
||||
<j-scrollbar height="480">
|
||||
<j-row
|
||||
:gutter="[24, 24]"
|
||||
v-if="procotolList.length > 0"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
<j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||
<j-col
|
||||
:span="8"
|
||||
v-for="item in procotolList"
|
||||
|
@ -177,66 +169,46 @@
|
|||
</j-form>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-scrollbar height="600">
|
||||
<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">
|
||||
{{
|
||||
procotolList.find(
|
||||
(i: any) =>
|
||||
i.id ===
|
||||
procotolCurrent,
|
||||
).name
|
||||
}}
|
||||
</div>
|
||||
<div
|
||||
class="config-right-item-context"
|
||||
v-if="config.document"
|
||||
>
|
||||
<Markdown
|
||||
:source="config.document"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="config-right-item"
|
||||
v-if="getNetworkCurrent()"
|
||||
>
|
||||
<div class="config-right-item-title">
|
||||
网络组件
|
||||
</div>
|
||||
<div
|
||||
<j-scrollbar height="580">
|
||||
<div class="doc">
|
||||
<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
|
||||
v-for="i in getNetworkCurrentData()"
|
||||
:key="i.address"
|
||||
>
|
||||
<j-badge
|
||||
:color="getColor(i)"
|
||||
:status="getColor(i)"
|
||||
:text="i.address"
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="config-right-item"
|
||||
v-if="
|
||||
config.routes &&
|
||||
config.routes.length > 0
|
||||
"
|
||||
>
|
||||
<div class="config-right-item-title">
|
||||
<h1>
|
||||
{{
|
||||
data.provider ===
|
||||
'mqtt-server-gateway' ||
|
||||
|
@ -245,8 +217,8 @@
|
|||
? 'topic'
|
||||
: 'URL信息'
|
||||
}}
|
||||
</div>
|
||||
<j-scrollbar height="200">
|
||||
</h1>
|
||||
<j-scrollbar height="400">
|
||||
<j-table
|
||||
:pagination="false"
|
||||
:rowKey="generateUUID()"
|
||||
|
@ -259,7 +231,7 @@
|
|||
? columnsMQTT
|
||||
: columnsHTTP
|
||||
"
|
||||
:scroll="{ y: 300 }"
|
||||
:scroll="{ y: 400 }"
|
||||
>
|
||||
<template
|
||||
#bodyCell="{
|
||||
|
@ -463,11 +435,9 @@ const getNetworkCurrentData = () =>
|
|||
? networkList.value.find((i: any) => i.id === networkCurrent).addresses
|
||||
: [];
|
||||
|
||||
const getColor = (i: any) => (i.health === -1 ? 'red' : 'green');
|
||||
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 = '上行';
|
||||
|
@ -644,7 +614,7 @@ watch(
|
|||
|
||||
<style lang="less" scoped>
|
||||
.steps-content {
|
||||
margin: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.steps-box {
|
||||
min-height: 400px;
|
||||
|
@ -657,7 +627,6 @@ watch(
|
|||
.steps-action {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.alert {
|
||||
height: 40px;
|
||||
|
@ -685,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>
|
||||
|
|
|
@ -5,6 +5,18 @@
|
|||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="12" v-for="item in items.list" :key="item.id">
|
||||
<div class="provider">
|
||||
<div
|
||||
class="card-content-bg1"
|
||||
:style="{
|
||||
background: getBackgroundColor(),
|
||||
}"
|
||||
></div>
|
||||
<div
|
||||
class="card-content-bg2"
|
||||
:style="{
|
||||
background: getBackgroundColor(),
|
||||
}"
|
||||
></div>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="images">
|
||||
|
@ -47,6 +59,14 @@ const props = defineProps({
|
|||
|
||||
const emit = defineEmits(['onClick']);
|
||||
|
||||
const getBackgroundColor = () => {
|
||||
return `linear-gradient(
|
||||
188.4deg,
|
||||
rgba(9, 46, 231, 0.03) 22.94%,
|
||||
rgba(9, 46, 231, 0) 94.62%
|
||||
)`;
|
||||
};
|
||||
|
||||
const click = (value: object) => {
|
||||
emit('onClick', value);
|
||||
};
|
||||
|
@ -61,10 +81,11 @@ const click = (value: object) => {
|
|||
.provider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background: url('/public/images/access/background.png') no-repeat;
|
||||
padding: 24px;
|
||||
// background: url('/public/images/access/background.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: 1px solid #e6e6e6;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
|
@ -84,6 +105,33 @@ const click = (value: object) => {
|
|||
box-shadow: 0 0 24px rgba(#000, 0.1);
|
||||
}
|
||||
}
|
||||
.card-content-bg1 {
|
||||
position: absolute;
|
||||
right: -5%;
|
||||
height: 100%;
|
||||
width: 44.65%;
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
188.4deg,
|
||||
rgba(229, 0, 18, 0.03) 22.94%,
|
||||
rgba(229, 0, 18, 0) 94.62%
|
||||
);
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
|
||||
.card-content-bg2 {
|
||||
position: absolute;
|
||||
right: -5%;
|
||||
height: 100%;
|
||||
width: calc(44.65% + 34px);
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
188.4deg,
|
||||
rgba(229, 0, 18, 0.03) 22.94%,
|
||||
rgba(229, 0, 18, 0) 94.62%
|
||||
);
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
|
@ -92,31 +140,40 @@ const click = (value: object) => {
|
|||
width: 100%;
|
||||
.left {
|
||||
display: flex;
|
||||
width: calc(100% - 70px);
|
||||
width: calc(100% - 100px);
|
||||
.images {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
}
|
||||
}
|
||||
|
||||
.context {
|
||||
width: calc(100% - 84px);
|
||||
margin: 10px;
|
||||
width: calc(100% - 88px);
|
||||
margin: 8px;
|
||||
margin-left: 24px;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.desc {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
margin-top: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #666666;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
|
@ -51,15 +51,12 @@
|
|||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
color: #2f54eb;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
"
|
||||
class="card-title"
|
||||
@click.stop="handlEye(slotProps.id)"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
|
@ -71,11 +68,17 @@
|
|||
v-if="slotProps.channelInfo"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div class="card-item-content-text">
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
{{ slotProps.channelInfo.name }}
|
||||
</div>
|
||||
<div
|
||||
class="card-item-content-text"
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
"
|
||||
v-if="
|
||||
slotProps.channelInfo.addresses
|
||||
"
|
||||
|
@ -83,53 +86,51 @@
|
|||
<j-badge
|
||||
:status="getStatus(slotProps)"
|
||||
/>
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.channelInfo
|
||||
.addresses[0].address
|
||||
}}</template>
|
||||
<span>
|
||||
{{
|
||||
slotProps.channelInfo
|
||||
.addresses[0].address
|
||||
}}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</span>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="slotProps.protocolDetail"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div class="card-item-content-text">
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
协议
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.protocolDetail
|
||||
.name
|
||||
}}</template>
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
"
|
||||
>
|
||||
<span>
|
||||
{{
|
||||
slotProps.protocolDetail
|
||||
.name
|
||||
}}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</span>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-row>
|
||||
<j-col :span="24">
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>
|
||||
{{
|
||||
getDescription(
|
||||
slotProps,
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
<j-col
|
||||
:span="24"
|
||||
class="card-item-content-description"
|
||||
>
|
||||
<j-tooltip>
|
||||
<template #title>
|
||||
{{ getDescription(slotProps) }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
{{ getDescription(slotProps) }}
|
||||
</j-tooltip>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
|
@ -207,8 +208,8 @@ const columns = [
|
|||
search: {
|
||||
type: 'select',
|
||||
options: async () => {
|
||||
const res = await getProviders();
|
||||
return (res?.result || []).map((item) => ({
|
||||
const res: any = await getProviders();
|
||||
return (res?.result || [])?.map((item: any) => ({
|
||||
lable: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
|
@ -339,7 +340,7 @@ const getDescription = (slotProps: Record<string, any>) =>
|
|||
)?.description;
|
||||
|
||||
const getStatus = (slotProps: Record<string, any>) =>
|
||||
slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'success';
|
||||
slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'processing';
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
|
@ -358,12 +359,29 @@ const handleSearch = (e: any) => {
|
|||
|
||||
.card-item-content {
|
||||
min-height: 100px;
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.card-item-content-box {
|
||||
min-height: 50px;
|
||||
}
|
||||
.card-item-content-text {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
|
||||
.card-item-content-text-title {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.card-item-content-description {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #666666;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
|
|
|
@ -75,11 +75,13 @@
|
|||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
||||
<j-form
|
||||
ref="formRef2"
|
||||
layout="vertical"
|
||||
name="dynamic_form_nest_item"
|
||||
:model="dynamicValidateForm"
|
||||
class="form2"
|
||||
>
|
||||
<div
|
||||
v-for="(
|
||||
|
@ -582,59 +584,71 @@
|
|||
</j-radio-group>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<div class="form2-row">
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
cluster.configuration.secure
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="证书"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'certId',
|
||||
]"
|
||||
:rules="Rules.certId"
|
||||
class="form2-left"
|
||||
>
|
||||
<j-select
|
||||
v-model:value="
|
||||
cluster
|
||||
.configuration
|
||||
.certId
|
||||
"
|
||||
:options="certIdOptions"
|
||||
placeholder="请选择证书"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
cluster.configuration.secure
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="私钥别名"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'privateKeyAlias',
|
||||
]"
|
||||
:rules="
|
||||
Rules.privateKeyAlias
|
||||
"
|
||||
class="form2-right"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="
|
||||
cluster
|
||||
.configuration
|
||||
.privateKeyAlias
|
||||
"
|
||||
placeholder="请输入私钥别名"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</div>
|
||||
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="cluster.configuration.secure"
|
||||
>
|
||||
<j-form-item
|
||||
label="证书"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'certId',
|
||||
]"
|
||||
:rules="Rules.certId"
|
||||
>
|
||||
<j-select
|
||||
v-model:value="
|
||||
cluster.configuration
|
||||
.certId
|
||||
"
|
||||
:options="certIdOptions"
|
||||
placeholder="请选择证书"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="cluster.configuration.secure"
|
||||
>
|
||||
<j-form-item
|
||||
label="私钥别名"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'privateKeyAlias',
|
||||
]"
|
||||
:rules="Rules.privateKeyAlias"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="
|
||||
cluster.configuration
|
||||
.privateKeyAlias
|
||||
"
|
||||
placeholder="请输入私钥别名"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="24"
|
||||
v-if="
|
||||
|
@ -690,249 +704,265 @@
|
|||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
isVisible(
|
||||
'delimited',
|
||||
cluster.configuration
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="分隔符"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'delimited',
|
||||
]"
|
||||
:rules="Rules.delimited"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="
|
||||
<div class="form2-row">
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
isVisible(
|
||||
'delimited',
|
||||
cluster.configuration
|
||||
.parserConfiguration
|
||||
.delimited
|
||||
"
|
||||
placeholder="请输入分隔符"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="24"
|
||||
v-if="
|
||||
isVisible(
|
||||
'lang',
|
||||
cluster.configuration
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
v-show="false"
|
||||
label="脚本语言"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'lang',
|
||||
]"
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="
|
||||
cluster.configuration
|
||||
.parserConfiguration
|
||||
.lang
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="24"
|
||||
v-if="
|
||||
isVisible(
|
||||
'script',
|
||||
cluster.configuration
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="解析脚本"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'script',
|
||||
]"
|
||||
:rules="Rules.script"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
"
|
||||
<j-form-item
|
||||
label="分隔符"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'delimited',
|
||||
]"
|
||||
:rules="Rules.delimited"
|
||||
class="form2-left"
|
||||
>
|
||||
<j-monaco-editor
|
||||
theme="vs"
|
||||
<j-input
|
||||
v-model:value="
|
||||
cluster
|
||||
.configuration
|
||||
.parserConfiguration
|
||||
.script
|
||||
.delimited
|
||||
"
|
||||
language="javascript"
|
||||
placeholder="请输入分隔符"
|
||||
/>
|
||||
</div>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
isVisible(
|
||||
'size',
|
||||
cluster.configuration
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="长度值"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'size',
|
||||
]"
|
||||
:rules="Rules.size"
|
||||
>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
v-model:value="
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
|
||||
<!-- <j-col
|
||||
:span="24"
|
||||
v-if="
|
||||
isVisible(
|
||||
'lang',
|
||||
cluster.configuration
|
||||
.parserConfiguration
|
||||
.size
|
||||
"
|
||||
placeholder="请输入长度值"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
isVisible(
|
||||
'length',
|
||||
cluster.configuration
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="长度"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'length',
|
||||
]"
|
||||
:rules="Rules.length"
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-select
|
||||
style="width: 100%"
|
||||
v-model:value="
|
||||
<j-form-item
|
||||
v-show="false"
|
||||
label="脚本语言"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'lang',
|
||||
]"
|
||||
class="form2-left"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="
|
||||
cluster
|
||||
.configuration
|
||||
.parserConfiguration
|
||||
.lang
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col> -->
|
||||
<j-col
|
||||
:span="24"
|
||||
v-if="
|
||||
isVisible(
|
||||
'script',
|
||||
cluster.configuration
|
||||
.parserConfiguration
|
||||
.length
|
||||
"
|
||||
:options="LengthOptions"
|
||||
placeholder="请选择长度"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
isVisible(
|
||||
'offset',
|
||||
cluster.configuration
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="偏移量"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'offset',
|
||||
]"
|
||||
:rules="Rules.offset"
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
v-model:value="
|
||||
<j-form-item
|
||||
label="解析脚本"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'script',
|
||||
]"
|
||||
:rules="Rules.script"
|
||||
class="form2-left form2-right"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
"
|
||||
>
|
||||
<j-monaco-editor
|
||||
theme="vs"
|
||||
v-model:value="
|
||||
cluster
|
||||
.configuration
|
||||
.parserConfiguration
|
||||
.script
|
||||
"
|
||||
language="javascript"
|
||||
/>
|
||||
</div>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
isVisible(
|
||||
'size',
|
||||
cluster.configuration
|
||||
.parserConfiguration
|
||||
.offset
|
||||
"
|
||||
placeholder="请输入偏移量"
|
||||
:min="0"
|
||||
:max="65535"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
isVisible(
|
||||
'little',
|
||||
cluster.configuration
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="大小端"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'little',
|
||||
]"
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-select
|
||||
style="width: 100%"
|
||||
v-model:value="
|
||||
<j-form-item
|
||||
label="长度值"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'size',
|
||||
]"
|
||||
:rules="Rules.size"
|
||||
class="form2-left"
|
||||
>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
v-model:value="
|
||||
cluster
|
||||
.configuration
|
||||
.parserConfiguration
|
||||
.size
|
||||
"
|
||||
placeholder="请输入长度值"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
isVisible(
|
||||
'length',
|
||||
cluster.configuration
|
||||
.parserConfiguration
|
||||
.little
|
||||
"
|
||||
:options="LittleOptions"
|
||||
placeholder="请选择大小端"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="长度"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'length',
|
||||
]"
|
||||
:rules="Rules.length"
|
||||
class="form2-left"
|
||||
>
|
||||
<j-select
|
||||
style="width: 100%"
|
||||
v-model:value="
|
||||
cluster
|
||||
.configuration
|
||||
.parserConfiguration
|
||||
.length
|
||||
"
|
||||
:options="LengthOptions"
|
||||
placeholder="请选择长度"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
isVisible(
|
||||
'offset',
|
||||
cluster.configuration
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="偏移量"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'offset',
|
||||
]"
|
||||
:rules="Rules.offset"
|
||||
class="form2-right"
|
||||
>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
v-model:value="
|
||||
cluster
|
||||
.configuration
|
||||
.parserConfiguration
|
||||
.offset
|
||||
"
|
||||
placeholder="请输入偏移量"
|
||||
:min="0"
|
||||
:max="65535"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="
|
||||
isVisible(
|
||||
'little',
|
||||
cluster.configuration
|
||||
.parserType,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-form-item
|
||||
label="大小端"
|
||||
:name="[
|
||||
'cluster',
|
||||
index,
|
||||
'configuration',
|
||||
'parserConfiguration',
|
||||
'little',
|
||||
]"
|
||||
class="form2-left"
|
||||
>
|
||||
<j-select
|
||||
style="width: 100%"
|
||||
v-model:value="
|
||||
cluster
|
||||
.configuration
|
||||
.parserConfiguration
|
||||
.little
|
||||
"
|
||||
:options="LittleOptions"
|
||||
placeholder="请选择大小端"
|
||||
allowClear
|
||||
show-search
|
||||
:filter-option="
|
||||
filterOption
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</div>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
|
@ -1278,8 +1308,39 @@ watch(
|
|||
width: 100%;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.form2 {
|
||||
:deep(.ant-collapse-content-box) {
|
||||
background: #fafafa;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.form2-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
flex-flow: row wrap;
|
||||
.form2-left {
|
||||
padding-left: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.form2-right {
|
||||
padding-right: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
width: calc(100%-10px);
|
||||
height: 100%;
|
||||
background-color: #f4f4f4;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
margin-bottom: 20px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
|
@ -50,7 +50,7 @@
|
|||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
color: #2f54eb;
|
||||
"
|
||||
>
|
||||
|
@ -65,8 +65,10 @@
|
|||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
<j-col :span="8">
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
类型
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
|
@ -78,8 +80,11 @@
|
|||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
|
||||
<j-col :span="16">
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
详情
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
|
@ -87,9 +92,7 @@
|
|||
<template #title>{{
|
||||
getDetails(slotProps)
|
||||
}}</template>
|
||||
<span class="details-text">{{
|
||||
getDetails(slotProps)
|
||||
}}</span>
|
||||
{{ getDetails(slotProps) }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
|
@ -143,10 +146,14 @@
|
|||
</j-space>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
<BadgeStatus
|
||||
:text="slotProps.state.text"
|
||||
:status="statusMap.get(slotProps.state.value)"
|
||||
/>
|
||||
:status="slotProps.state.value"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #shareCluster="slotProps">
|
||||
{{
|
||||
|
@ -171,15 +178,16 @@ import { getImage } from '@/utils/comm';
|
|||
import { supports, query, remove, start, shutdown } from '@/api/link/type';
|
||||
import { onlyMessage } from '@/utils/comm';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
import BadgeStatus from '@/components/BadgeStatus/index.vue';
|
||||
|
||||
const menuStory = useMenuStore();
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
const options = ref([]);
|
||||
|
||||
const statusMap = new Map();
|
||||
statusMap.set('enabled', 'success');
|
||||
statusMap.set('disabled', 'error');
|
||||
// const statusMap = new Map();
|
||||
// statusMap.set('enabled', 'processing');
|
||||
// statusMap.set('disabled', 'error');
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
@ -387,15 +395,23 @@ const handleSearch = (e: any) => {
|
|||
min-height: 50px;
|
||||
}
|
||||
.card-item-content-text {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 170%;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
opacity: 0.75;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
}
|
||||
}
|
||||
.details-text {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
.card-item-content-text-title {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 170%;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -3700,8 +3700,8 @@ jetlinks-store@^0.0.3:
|
|||
|
||||
jetlinks-ui-components@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#1059095549559c679f9197df360e3ee2360eff44"
|
||||
integrity sha512-aK2ym5HF6DBsEnvrILGkzRkdPC+QSjrft3xK2DrDRqU5lZq0uqS55ksk88GoaFzGSgqznK+PPWZaYc0Lo2WH/A==
|
||||
resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#682711e0f69c141fff2c256db61a060c82539611"
|
||||
integrity sha512-rQxD/YlE+XSAG7BWIcFTtKrCQJXk5o+TUgejyuUT/baBThJB6xYt1k2dQEdXyiwpukYen5FzaoLpelSD9SUegw==
|
||||
dependencies:
|
||||
"@vueuse/core" "^9.12.0"
|
||||
ant-design-vue "^3.2.15"
|
||||
|
|
Loading…
Reference in New Issue