Merge pull request #65 from jetlinks/dev-hub

style: 设备接入网关、网络组件以及详情样式微调
This commit is contained in:
胡彪 2023-03-21 10:23:30 +08:00 committed by GitHub
commit acae0936dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 1180 additions and 1334 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>
2CTWing端配置产品/设备/分组级订阅订阅方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添加设备为每一台设备设置唯一的IMEIIMSI码需与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添加设备为每一台设备设置唯一的IMEIIMSI码需与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>

View File

@ -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添加设备为每一台设备设置唯一的IMEISNIMSIPSK码需与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添加设备为每一台设备设置唯一的IMEISNIMSIPSK码需与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>

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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;
}

View File

@ -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; //

View File

@ -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>

View File

@ -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>

View File

@ -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"