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

update: 运维管理、数据采集替换组件

This commit is contained in:
jackhoo_98 2023-03-04 10:50:06 +08:00
parent 9212cd6a7f
commit 573ae35353
41 changed files with 1122 additions and 1134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/views/DataCollect/Channel/Save/index.vue
View File

@ -1,11 +1,11 @@
<template lang=""> <template lang="">
<a-modal <j-modal
:title="data.id ? '编辑' : '新增'" :title="data.id ? '编辑' : '新增'"
:visible="true" :visible="true"
width="700px" width="700px"
@cancel="handleCancel" @cancel="handleCancel"
> >
<a-form <j-form
class="form" class="form"
layout="vertical" layout="vertical"
:model="formData" :model="formData"
@ -14,14 +14,14 @@
:rules="FormValidate" :rules="FormValidate"
ref="formRef" ref="formRef"
> >
<a-form-item label="通道名称" name="name"> <j-form-item label="通道名称" name="name">
<a-input <j-input
placeholder="请输入通道名称" placeholder="请输入通道名称"
v-model:value="formData.name" v-model:value="formData.name"
/> />
</a-form-item> </j-form-item>
<a-form-item label="通讯协议" name="provider"> <j-form-item label="通讯协议" name="provider">
<a-select <j-select
style="width: 100%" style="width: 100%"
v-model:value="formData.provider" v-model:value="formData.provider"
:options="providersList" :options="providersList"
@ -31,8 +31,8 @@
:filter-option="filterOption" :filter-option="filterOption"
:disabled="!!id" :disabled="!!id"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="formData.provider === 'MODBUS_TCP'" v-if="formData.provider === 'MODBUS_TCP'"
:name="['configuration', 'host']" :name="['configuration', 'host']"
:rules="FormValidate.host" :rules="FormValidate.host"
@ -40,50 +40,50 @@
<div class="form-label"> <div class="form-label">
Modbus主机IP Modbus主机IP
<span class="form-label-required">*</span> <span class="form-label-required">*</span>
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p>支持ipv4、ipv6、域名</p> <p>支持ipv4、ipv6、域名</p>
</template> </template>
<AIcon type="QuestionCircleOutlined" /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input <j-input
placeholder="请输入Modbus主机IP" placeholder="请输入Modbus主机IP"
v-model:value="formData.configuration.host" v-model:value="formData.configuration.host"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="formData.provider === 'MODBUS_TCP'" v-if="formData.provider === 'MODBUS_TCP'"
label="端口" label="端口"
:name="['configuration', 'port']" :name="['configuration', 'port']"
:rules="FormValidate.port" :rules="FormValidate.port"
> >
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
placeholder="请输入端口" placeholder="请输入端口"
v-model:value="formData.configuration.port" v-model:value="formData.configuration.port"
:min="1" :min="1"
:max="65535" :max="65535"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="formData.provider === 'OPC_UA'" v-if="formData.provider === 'OPC_UA'"
label="端点url" label="端点url"
:name="['configuration', 'endpoint']" :name="['configuration', 'endpoint']"
:rules="FormValidate.endpoint" :rules="FormValidate.endpoint"
> >
<a-input <j-input
placeholder="请输入端点url" placeholder="请输入端点url"
v-model:value="formData.configuration.endpoint" v-model:value="formData.configuration.endpoint"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="formData.provider === 'OPC_UA'" v-if="formData.provider === 'OPC_UA'"
label="安全策略" label="安全策略"
:name="['configuration.securityPolicy']" :name="['configuration.securityPolicy']"
:rules="FormValidate.securityPolicy" :rules="FormValidate.securityPolicy"
> >
<a-select <j-select
style="width: 100%" style="width: 100%"
v-model:value="formData.configuration.securityPolicy" v-model:value="formData.configuration.securityPolicy"
:options="Options['security-policies']" :options="Options['security-policies']"
@ -92,14 +92,14 @@
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="formData.provider === 'OPC_UA'" v-if="formData.provider === 'OPC_UA'"
label="安全模式" label="安全模式"
:name="['configuration.securityMode']" :name="['configuration.securityMode']"
:rules="FormValidate.securityMode" :rules="FormValidate.securityMode"
> >
<a-select <j-select
style="width: 100%" style="width: 100%"
v-model:value="formData.configuration.securityMode" v-model:value="formData.configuration.securityMode"
:options="Options['security-modes']" :options="Options['security-modes']"
@ -108,8 +108,8 @@
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if=" v-if="
formData.configuration.securityMode === 'SignAndEncrypt' || formData.configuration.securityMode === 'SignAndEncrypt' ||
formData.configuration.securityMode === 'Sign' formData.configuration.securityMode === 'Sign'
@ -118,7 +118,7 @@
:name="['configuration.certificate']" :name="['configuration.certificate']"
:rules="FormValidate.certificate" :rules="FormValidate.certificate"
> >
<a-select <j-select
style="width: 100%" style="width: 100%"
v-model:value="formData.configuration.certificate" v-model:value="formData.configuration.certificate"
:options="certificateList" :options="certificateList"
@ -127,8 +127,8 @@
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="formData.provider === 'OPC_UA'" v-if="formData.provider === 'OPC_UA'"
label="权限认证" label="权限认证"
:name="['configuration.authType']" :name="['configuration.authType']"
@ -140,41 +140,41 @@
:options="Options['auth-types']" :options="Options['auth-types']"
v-model="formData.configuration.authType" v-model="formData.configuration.authType"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="formData.configuration.authType === 'username'" v-if="formData.configuration.authType === 'username'"
label="用户名" label="用户名"
:name="['configuration.username']" :name="['configuration.username']"
:rules="FormValidate.username" :rules="FormValidate.username"
> >
<a-input <j-input
placeholder="请输入用户名" placeholder="请输入用户名"
v-model:value="formData.configuration.username" v-model:value="formData.configuration.username"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="formData.configuration.authType === 'username'" v-if="formData.configuration.authType === 'username'"
label="密码" label="密码"
:name="['configuration.password']" :name="['configuration.password']"
:rules="FormValidate.password" :rules="FormValidate.password"
> >
<a-input-password <j-input-password
placeholder="请输入密码" placeholder="请输入密码"
v-model:value="formData.configuration.password" v-model:value="formData.configuration.password"
/> />
</a-form-item> </j-form-item>
<a-form-item label="说明" name="description"> <j-form-item label="说明" name="description">
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
v-model:value="formData.description" v-model:value="formData.description"
:maxlength="200" :maxlength="200"
:rows="3" :rows="3"
showCount showCount
/> />
</a-form-item> </j-form-item>
</a-form> </j-form>
<template #footer> <template #footer>
<a-button key="back" @click="handleCancel">取消</a-button> <j-button key="back" @click="handleCancel">取消</j-button>
<PermissionButton <PermissionButton
key="submit" key="submit"
type="primary" type="primary"
@ -186,7 +186,7 @@
确认 确认
</PermissionButton> </PermissionButton>
</template> </template>
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { import {

20
src/views/DataCollect/Channel/index.vue
View File

@ -50,26 +50,26 @@
{{ slotProps.name }} {{ slotProps.name }}
</PermissionButton> </PermissionButton>
<a-row class="card-item-content-box"> <j-row class="card-item-content-box">
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
协议 协议
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
slotProps.provider slotProps.provider
}}</template> }}</template>
{{ slotProps.provider }} {{ slotProps.provider }}
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
地址 地址
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
slotProps.configuration slotProps.configuration
.host || .host ||
@ -82,10 +82,10 @@
slotProps.configuration slotProps.configuration
.endpoint .endpoint
}}</span> }}</span>
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</template> </template>
<template #actions="item"> <template #actions="item">

20
src/views/DataCollect/Dashboard/components/Card.vue
View File

@ -1,24 +1,24 @@
<template> <template>
<a-spin :spinning="loading"> <j-spin :spinning="loading">
<div class="dash-board"> <div class="dash-board">
<div class="header"> <div class="header">
<div class="left"> <div class="left">
<h3 style="width: 100px">点位数据量</h3> <h3 style="width: 100px">点位数据量</h3>
</div> </div>
<div class="right"> <div class="right">
<a-radio-group <j-radio-group
default-value="a" default-value="a"
button-style="solid" button-style="solid"
style="margin-right: 10px" style="margin-right: 10px"
v-model:value="data.time.type" v-model:value="data.time.type"
> >
<a-radio-button value="hour"> <j-radio-button value="hour">
最近1小时 最近1小时
</a-radio-button> </j-radio-button>
<a-radio-button value="today"> 今日 </a-radio-button> <j-radio-button value="today"> 今日 </j-radio-button>
<a-radio-button value="week"> 近一周 </a-radio-button> <j-radio-button value="week"> 近一周 </j-radio-button>
</a-radio-group> </j-radio-group>
<a-range-picker <j-range-picker
:allowClear="false" :allowClear="false"
:show-time="{ format: 'HH:mm:ss' }" :show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
@ -28,14 +28,14 @@
<template #suffixIcon <template #suffixIcon
><AIcon type="CalendarOutlined" ><AIcon type="CalendarOutlined"
/></template> /></template>
</a-range-picker> </j-range-picker>
</div> </div>
</div> </div>
<div> <div>
<div ref="chartRef" style="width: 100%; height: 350px"></div> <div ref="chartRef" style="width: 100%; height: 350px"></div>
</div> </div>
</div> </div>
</a-spin> </j-spin>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

6
src/views/DataCollect/Dashboard/components/TopCard.vue
View File

@ -4,12 +4,12 @@
<div class="content-left"> <div class="content-left">
<div class="content-left-title"> <div class="content-left-title">
<span>{{ title }}</span> <span>{{ title }}</span>
<a-tooltip placement="top" v-if="tooltip"> <j-tooltip placement="top" v-if="tooltip">
<template #title> <template #title>
<span>{{ tooltip }}</span> <span>{{ tooltip }}</span>
</template> </template>
<AIcon type="QuestionCircleOutlined" /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </j-tooltip>
</div> </div>
<div class="content-left-value">{{ value }}</div> <div class="content-left-value">{{ value }}</div>
</div> </div>
@ -20,7 +20,7 @@
<div class="top-card-footer"> <div class="top-card-footer">
<template v-for="(item, index) in footer" :key="index"> <template v-for="(item, index) in footer" :key="index">
<span v-if="!item.status">{{ item.title }}</span> <span v-if="!item.status">{{ item.title }}</span>
<a-badge v-else :text="item.title" :status="item.status" /> <j-badge v-else :text="item.title" :status="item.status" />
<div class="footer-item-value">{{ item.value }}</div> <div class="footer-item-value">{{ item.value }}</div>
</template> </template>
</div> </div>

16
src/views/DataCollect/Dashboard/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<page-container> <page-container>
<a-row :gutter="24"> <j-row :gutter="24">
<a-col :span="8" v-for="item in statusData" :key="item[0].type"> <j-col :span="8" v-for="item in statusData" :key="item[0].type">
<TopCard <TopCard
:title="item[0].label" :title="item[0].label"
:img=" :img="
@ -10,13 +10,13 @@
:footer="item" :footer="item"
:value="item[0].total" :value="item[0].total"
/> />
</a-col> </j-col>
</a-row> </j-row>
<a-row :gutter="24"> <j-row :gutter="24">
<a-col :span="24"> <j-col :span="24">
<Card /> <Card />
</a-col> </j-col>
</a-row> </j-row>
</page-container> </page-container>
</template> </template>

90
src/views/Log/Access/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<Search :columns="columns" target="search" @search="handleSearch" /> <Search :columns="columns" target="search" @search="handleSearch" />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
model="TABLE" model="TABLE"
:columns="columns" :columns="columns"
@ -17,102 +17,102 @@
}} }}
</template> </template>
<template #responseTime="slotProps"> <template #responseTime="slotProps">
<a-tag color="purple"> <j-tag color="purple">
{{ slotProps.responseTime - slotProps.requestTime }} ms {{ slotProps.responseTime - slotProps.requestTime }} ms
</a-tag> </j-tag>
</template> </template>
<template #username="slotProps"> <template #username="slotProps">
<a-tag color="geekblue"> <j-tag color="geekblue">
{{ slotProps.context.userName }} {{ slotProps.context.userName }}
</a-tag> </j-tag>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <j-space :size="16">
<a-tooltip <j-tooltip
v-for="i in getActions(slotProps)" v-for="i in getActions(slotProps)"
:key="i.key" :key="i.key"
v-bind="i.tooltip" v-bind="i.tooltip"
> >
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm"> <j-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
<a-button <j-button
:disabled="i.disabled" :disabled="i.disabled"
style="padding: 0" style="padding: 0"
type="link" type="link"
><AIcon :type="i.icon" ><AIcon :type="i.icon"
/></a-button> /></j-button>
</a-popconfirm> </j-popconfirm>
<a-button <j-button
style="padding: 0" style="padding: 0"
type="link" type="link"
v-else v-else
@click="i.onClick && i.onClick(slotProps)" @click="i.onClick && i.onClick(slotProps)"
> >
<a-button <j-button
:disabled="i.disabled" :disabled="i.disabled"
style="padding: 0" style="padding: 0"
type="link" type="link"
><AIcon :type="i.icon" ><AIcon :type="i.icon"
/></a-button> /></j-button>
</a-button> </j-button>
</a-tooltip> </j-tooltip>
</a-space> </j-space>
</template> </template>
</JTable> </j-pro-table>
</div> </div>
<a-modal <j-modal
:width="1100" :width="1100"
v-model:visible="visible" v-model:visible="visible"
title="详情" title="详情"
@ok="handleOk" @ok="handleOk"
> >
<a-descriptions :data="descriptionsData" title="" bordered :column="2"> <j-descriptions :data="descriptionsData" title="" bordered :column="2">
<a-descriptions-item label="URL"> <j-descriptions-item label="URL">
{{ descriptionsData?.url }} {{ descriptionsData?.url }}
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="请求方法"> <j-descriptions-item label="请求方法">
{{ descriptionsData?.httpMethod }} {{ descriptionsData?.httpMethod }}
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="动作"> <j-descriptions-item label="动作">
{{ descriptionsData?.action }} {{ descriptionsData?.action }}
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="类名"> <j-descriptions-item label="类名">
{{ descriptionsData?.target }} {{ descriptionsData?.target }}
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="方法名"> <j-descriptions-item label="方法名">
{{ descriptionsData?.method }} {{ descriptionsData?.method }}
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="IP"> <j-descriptions-item label="IP">
{{ descriptionsData?.ip }} {{ descriptionsData?.ip }}
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="请求时间"> <j-descriptions-item label="请求时间">
{{ {{
moment(descriptionsData?.requestTime).format( moment(descriptionsData?.requestTime).format(
'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss',
) )
}} }}
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="请求耗时"> <j-descriptions-item label="请求耗时">
{{ {{
descriptionsData?.responseTime - descriptionsData?.responseTime -
descriptionsData?.requestTime + descriptionsData?.requestTime +
'ms' 'ms'
}} }}
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="请求头" :span="2"> <j-descriptions-item label="请求头" :span="2">
{{ descriptionsData?.httpHeaders }} {{ descriptionsData?.httpHeaders }}
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="请求参数" :span="2"> <j-descriptions-item label="请求参数" :span="2">
{{ descriptionsData?.parameters }} {{ descriptionsData?.parameters }}
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="异常信息" :span="2"> <j-descriptions-item label="异常信息" :span="2">
<a-textarea <j-textarea
v-model:value="descriptionsData.exception" v-model:value="descriptionsData.exception"
placeholder="暂无数据" placeholder="暂无数据"
:auto-size="{ minRows: 3, maxRows: 20 }" :auto-size="{ minRows: 3, maxRows: 20 }"
/> />
</a-descriptions-item> </j-descriptions-item>
</a-descriptions> </j-descriptions>
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup name="AccessLog"> <script lang="ts" setup name="AccessLog">
import type { ActionsType } from '@/components/Table/index.vue'; import type { ActionsType } from '@/components/Table/index.vue';

42
src/views/Log/System/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<Search :columns="columns" target="search" @search="handleSearch" /> <Search :columns="columns" target="search" @search="handleSearch" />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
model="TABLE" model="TABLE"
:columns="columns" :columns="columns"
@ -12,7 +12,7 @@
:params="params" :params="params"
> >
<template #level="slotProps"> <template #level="slotProps">
<a-tag <j-tag
:color=" :color="
slotProps.level === 'WARN' slotProps.level === 'WARN'
? 'orange' ? 'orange'
@ -24,7 +24,7 @@
" "
> >
{{ slotProps.level }} {{ slotProps.level }}
</a-tag> </j-tag>
</template> </template>
<template #createTime="slotProps"> <template #createTime="slotProps">
{{ moment(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss') }} {{ moment(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss') }}
@ -34,39 +34,39 @@
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <j-space :size="16">
<a-tooltip <j-tooltip
v-for="i in getActions(slotProps)" v-for="i in getActions(slotProps)"
:key="i.key" :key="i.key"
v-bind="i.tooltip" v-bind="i.tooltip"
> >
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm"> <j-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
<a-button <j-button
:disabled="i.disabled" :disabled="i.disabled"
style="padding: 0" style="padding: 0"
type="link" type="link"
><AIcon :type="i.icon" ><AIcon :type="i.icon"
/></a-button> /></j-button>
</a-popconfirm> </j-popconfirm>
<a-button <j-button
style="padding: 0" style="padding: 0"
type="link" type="link"
v-else v-else
@click="i.onClick && i.onClick(slotProps)" @click="i.onClick && i.onClick(slotProps)"
> >
<a-button <j-button
:disabled="i.disabled" :disabled="i.disabled"
style="padding: 0" style="padding: 0"
type="link" type="link"
><AIcon :type="i.icon" ><AIcon :type="i.icon"
/></a-button> /></j-button>
</a-button> </j-button>
</a-tooltip> </j-tooltip>
</a-space> </j-space>
</template> </template>
</JTable> </j-pro-table>
</div> </div>
<a-modal <j-modal
:width="1100" :width="1100"
v-model:visible="visible" v-model:visible="visible"
title="详情" title="详情"
@ -82,7 +82,7 @@
<span>{{ descriptionsData?.className }}</span> <span>{{ descriptionsData?.className }}</span>
</div> </div>
<div class="mb-10"> <div class="mb-10">
<a-tag <j-tag
:color=" :color="
descriptionsData?.level === 'WARN' descriptionsData?.level === 'WARN'
? 'orange' ? 'orange'
@ -94,15 +94,15 @@
" "
> >
{{ descriptionsData?.level }} {{ descriptionsData?.level }}
</a-tag> </j-tag>
<span>{{ descriptionsData?.message }}</span> <span>{{ descriptionsData?.message }}</span>
</div> </div>
<a-textarea <j-textarea
v-model:value="descriptionsData.exceptionStack" v-model:value="descriptionsData.exceptionStack"
placeholder="暂无数据" placeholder="暂无数据"
:auto-size="{ minRows: 24, maxRows: 28 }" :auto-size="{ minRows: 24, maxRows: 28 }"
/> />
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup name="SystemLog"> <script lang="ts" setup name="SystemLog">
import type { ActionsType } from '@/components/Table/index.vue'; import type { ActionsType } from '@/components/Table/index.vue';

14
src/views/device/Firmware/Save/FileUpload.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<a-spin :spinning="loading"> <j-spin :spinning="loading">
<a-input <j-input
placeholder="请上传文件" placeholder="请上传文件"
v-model:value="fileValue" v-model:value="fileValue"
style="width: calc(100% - 110px)" style="width: calc(100% - 110px)"
:disabled="true" :disabled="true"
/> />
<a-upload <j-upload
name="file" name="file"
:multiple="true" :multiple="true"
:action="FIRMWARE_UPLOAD" :action="FIRMWARE_UPLOAD"
@ -17,15 +17,15 @@
:showUploadList="false" :showUploadList="false"
class="upload-box" class="upload-box"
> >
<a-button type="primary"> <j-button type="primary">
<div> <div>
<AIcon type="UploadOutlined" /><span class="upload-text" <AIcon type="UploadOutlined" /><span class="upload-text"
>上传文件</span >上传文件</span
> >
</div> </div>
</a-button> </j-button>
</a-upload> </j-upload>
</a-spin> </j-spin>
</template> </template>
<script setup lang="ts" name="FileUpload"> <script setup lang="ts" name="FileUpload">

128
src/views/device/Firmware/Save/index.vue
View File

@ -1,5 +1,5 @@
<template lang=""> <template lang="">
<a-modal <j-modal
:title="data.id ? '编辑' : '新增'" :title="data.id ? '编辑' : '新增'"
ok-text="确认" ok-text="确认"
cancel-text="取消" cancel-text="取消"
@ -9,61 +9,61 @@
@cancel="handleCancel" @cancel="handleCancel"
@ok="handleOk" @ok="handleOk"
> >
<a-form <j-form
class="form" class="form"
layout="vertical" layout="vertical"
:model="formData" :model="formData"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
> >
<a-row :gutter="[24, 0]"> <j-row :gutter="[24, 0]">
<a-col :span="24"> <j-col :span="24">
<a-form-item label="名称" v-bind="validateInfos.name"> <j-form-item label="名称" v-bind="validateInfos.name">
<a-input <j-input
placeholder="请输入名称" placeholder="请输入名称"
v-model:value="formData.name" v-model:value="formData.name"
/></a-form-item> /></j-form-item>
</a-col> </j-col>
<a-col :span="24" <j-col :span="24"
><a-form-item ><j-form-item
label="所属产品" label="所属产品"
v-bind="validateInfos.productId" v-bind="validateInfos.productId"
> >
<a-select <j-select
v-model:value="formData.productId" v-model:value="formData.productId"
:options="productOptions" :options="productOptions"
placeholder="请选择所属产品" placeholder="请选择所属产品"
allowClear allowClear
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
/> </a-form-item /> </j-form-item
></a-col> ></j-col>
<a-col :span="12" <j-col :span="12"
><a-form-item label="版本号" v-bind="validateInfos.version"> ><j-form-item label="版本号" v-bind="validateInfos.version">
<a-input <j-input
placeholder="请输入版本号" placeholder="请输入版本号"
v-model:value="formData.version" /></a-form-item v-model:value="formData.version" /></j-form-item
></a-col> ></j-col>
<a-col :span="12" <j-col :span="12"
><a-form-item ><j-form-item
label="版本序号" label="版本序号"
v-bind="validateInfos.versionOrder" v-bind="validateInfos.versionOrder"
> >
<a-input-number <j-input-number
placeholder="请输入版本序号" placeholder="请输入版本序号"
style="width: 100%" style="width: 100%"
:min="1" :min="1"
:max="99999" :max="99999"
v-model:value=" v-model:value="
formData.versionOrder formData.versionOrder
" /></a-form-item " /></j-form-item
></a-col> ></j-col>
<a-col :span="12" <j-col :span="12"
><a-form-item ><j-form-item
label="签名方式" label="签名方式"
v-bind="validateInfos.signMethod" v-bind="validateInfos.signMethod"
> >
<a-select <j-select
v-model:value="formData.signMethod" v-model:value="formData.signMethod"
:options="[ :options="[
{ label: 'MD5', value: 'md5' }, { label: 'MD5', value: 'md5' },
@ -75,27 +75,27 @@
:filter-option="filterOption" :filter-option="filterOption"
@change="changeSignMethod" @change="changeSignMethod"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12" <j-col :span="12"
><a-form-item label="签名" v-bind="validateInfos.sign"> ><j-form-item label="签名" v-bind="validateInfos.sign">
<a-input <j-input
placeholder="请输入签名" placeholder="请输入签名"
v-model:value="formData.sign" /></a-form-item v-model:value="formData.sign" /></j-form-item
></a-col> ></j-col>
<a-col :span="24"> <j-col :span="24">
<a-form-item label="固件上传" v-bind="validateInfos.url"> <j-form-item label="固件上传" v-bind="validateInfos.url">
<FileUpload <FileUpload
v-model:modelValue="formData.url" v-model:modelValue="formData.url"
v-model:extraValue="extraValue" v-model:extraValue="extraValue"
/> </a-form-item /> </j-form-item
></a-col> ></j-col>
<a-col :span="24"> <j-col :span="24">
<a-form-item <j-form-item
label="其他配置" label="其他配置"
v-bind="validateInfos.properties" v-bind="validateInfos.properties"
> >
<a-form <j-form
:class=" :class="
dynamicValidateForm.properties.length !== 0 && dynamicValidateForm.properties.length !== 0 &&
'formRef' 'formRef'
@ -111,7 +111,7 @@
) in dynamicValidateForm.properties" ) in dynamicValidateForm.properties"
:key="propertie.keyid" :key="propertie.keyid"
> >
<a-form-item <j-form-item
:label="index === 0 && 'Key'" :label="index === 0 && 'Key'"
class="formRef-form-item" class="formRef-form-item"
:name="['properties', index, 'id']" :name="['properties', index, 'id']"
@ -120,12 +120,12 @@
message: '请输入KEY', message: '请输入KEY',
}" }"
> >
<a-input <j-input
v-model:value="propertie.id" v-model:value="propertie.id"
placeholder="请输入KEY" placeholder="请输入KEY"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
:label="index === 0 && 'Value'" :label="index === 0 && 'Value'"
class="formRef-form-item" class="formRef-form-item"
:name="['properties', index, 'value']" :name="['properties', index, 'value']"
@ -134,51 +134,51 @@
message: '请输入VALUE', message: '请输入VALUE',
}" }"
> >
<a-input <j-input
v-model:value="propertie.value" v-model:value="propertie.value"
placeholder="请输入VALUE" placeholder="请输入VALUE"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
:label="index === 0 && '操作'" :label="index === 0 && '操作'"
class="formRef-form-item" class="formRef-form-item"
style="width: 10%" style="width: 10%"
> >
<a-popconfirm <j-popconfirm
title="确认删除吗？" title="确认删除吗？"
ok-text="确认" ok-text="确认"
cancel-text="取消" cancel-text="取消"
@confirm="removeUser(propertie)" @confirm="removeUser(propertie)"
> >
<AIcon type="DeleteOutlined" /> <AIcon type="DeleteOutlined" />
</a-popconfirm> </j-popconfirm>
</a-form-item> </j-form-item>
</div> </div>
<a-form-item class="formRef-form-item-add"> <j-form-item class="formRef-form-item-add">
<a-button type="dashed" block @click="addUser"> <j-button type="dashed" block @click="addUser">
<AIcon type="PlusOutlined" /> <AIcon type="PlusOutlined" />
添加 添加
</a-button> </j-button>
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-form-item></a-col </j-form-item></j-col
> >
<a-col :span="24"> <j-col :span="24">
<a-form-item <j-form-item
label="说明" label="说明"
v-bind="validateInfos.description" v-bind="validateInfos.description"
> >
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
v-model:value="formData.description" v-model:value="formData.description"
:maxlength="200" :maxlength="200"
:rows="3" :rows="3"
showCount showCount
/> </a-form-item /> </j-form-item
></a-col> ></j-col>
</a-row> </j-row>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { message, Form } from 'ant-design-vue'; import { message, Form } from 'ant-design-vue';

4
src/views/device/Firmware/Task/Detail/Save.vue
View File

@ -1,5 +1,5 @@
<template lang=""> <template lang="">
<a-modal <j-modal
title="查看" title="查看"
ok-text="确认" ok-text="确认"
cancel-text="取消" cancel-text="取消"
@ -9,7 +9,7 @@
@ok="handleOk" @ok="handleOk"
> >
<span>失败原因：{{ data }}</span> <span>失败原因：{{ data }}</span>
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup name="TaskDetailSavePage"> <script lang="ts" setup name="TaskDetailSavePage">
const props = defineProps({ const props = defineProps({

12
src/views/device/Firmware/Task/Detail/index.vue
View File

@ -10,7 +10,7 @@
<div class="state-content"> <div class="state-content">
<div class="state-header"> <div class="state-header">
<div class="state-title"> <div class="state-title">
<a-badge <j-badge
:text="item.name" :text="item.name"
:color="colorMap.get(item.key)" :color="colorMap.get(item.key)"
/> />
@ -56,7 +56,7 @@
</div> </div>
<Search :columns="columns" target="search" @search="handleSearch" /> <Search :columns="columns" target="search" @search="handleSearch" />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
model="TABLE" model="TABLE"
:columns="columns" :columns="columns"
@ -78,7 +78,7 @@
<span>{{ slotProps.productName }}</span> <span>{{ slotProps.productName }}</span>
</template> </template>
<template #state="slotProps"> <template #state="slotProps">
<a-badge <j-badge
:text="slotProps.state.text" :text="slotProps.state.text"
:color="colorMap.get(slotProps.state.value)" :color="colorMap.get(slotProps.state.value)"
/> />
@ -87,7 +87,7 @@
<span>{{ slotProps.progress }}%</span> <span>{{ slotProps.progress }}%</span>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space> <j-space>
<template <template
v-for="i in getActions(slotProps)" v-for="i in getActions(slotProps)"
:key="i.key" :key="i.key"
@ -108,9 +108,9 @@
/></template> /></template>
</PermissionButton> </PermissionButton>
</template> </template>
</a-space> </j-space>
</template> </template>
</JTable> </j-pro-table>
<Save :data="current" v-if="visible" @change="saveChange" /> <Save :data="current" v-if="visible" @change="saveChange" />
</div> </div>
</page-container> </page-container>

18
src/views/device/Firmware/Task/Save/SelectDevices.vue
View File

@ -1,5 +1,5 @@
<template lang=""> <template lang="">
<a-input <j-input
placeholder="请选择设备" placeholder="请选择设备"
v-model:value="checkLable" v-model:value="checkLable"
:disabled="true" :disabled="true"
@ -11,8 +11,8 @@
@click="onVisible" @click="onVisible"
/> />
</template> </template>
</a-input> </j-input>
<a-modal <j-modal
v-if="visible" v-if="visible"
title="选择设备" title="选择设备"
ok-text="确认" ok-text="确认"
@ -28,7 +28,7 @@
@search="handleSearch" @search="handleSearch"
type="simple" type="simple"
/> />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
model="TABLE" model="TABLE"
:columns="columns" :columns="columns"
@ -43,20 +43,20 @@
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>
<a-checkbox <j-checkbox
v-model:checked="state.checkAll" v-model:checked="state.checkAll"
:indeterminate="state.indeterminate" :indeterminate="state.indeterminate"
@change="onCheckAllChange" @change="onCheckAllChange"
style="margin-left: 8px" style="margin-left: 8px"
> >
全选 全选
</a-checkbox> </j-checkbox>
</template> </template>
<template #productId="slotProps"> <template #productId="slotProps">
<span>{{ slotProps.productName }}</span> <span>{{ slotProps.productName }}</span>
</template> </template>
<template #state="slotProps"> <template #state="slotProps">
<a-badge <j-badge
:text="slotProps.state?.text" :text="slotProps.state?.text"
:status="statusMap.get(slotProps.state?.value)" :status="statusMap.get(slotProps.state?.value)"
/> />
@ -69,8 +69,8 @@
moment(slotProps.registerTime).format('YYYY-MM-DD HH:mm:ss') moment(slotProps.registerTime).format('YYYY-MM-DD HH:mm:ss')
}}</span> }}</span>
</template> </template>
</JTable> </j-pro-table>
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup name="SelectDevicesPage"> <script lang="ts" setup name="SelectDevicesPage">
import { import {

86
src/views/device/Firmware/Task/Save/index.vue
View File

@ -1,5 +1,5 @@
<template lang=""> <template lang="">
<a-modal <j-modal
:title="data.id ? '查看' : '新增' + '任务'" :title="data.id ? '查看' : '新增' + '任务'"
ok-text="确认" ok-text="确认"
cancel-text="取消" cancel-text="取消"
@ -9,7 +9,7 @@
@cancel="handleCancel" @cancel="handleCancel"
@ok="handleOk" @ok="handleOk"
> >
<a-form <j-form
class="form" class="form"
layout="vertical" layout="vertical"
:model="formData" :model="formData"
@ -18,18 +18,18 @@
ref="formRef" ref="formRef"
:rules="rules" :rules="rules"
> >
<a-row :gutter="[24, 0]"> <j-row :gutter="[24, 0]">
<a-col :span="24"> <j-col :span="24">
<a-form-item label="任务名称" name="name"> <j-form-item label="任务名称" name="name">
<a-input <j-input
placeholder="请输入任务名称" placeholder="请输入任务名称"
v-model:value="formData.name" v-model:value="formData.name"
:disabled="view" :disabled="view"
/></a-form-item> /></j-form-item>
</a-col> </j-col>
<a-col :span="24" <j-col :span="24"
><a-form-item label="推送方式" name="mode"> ><j-form-item label="推送方式" name="mode">
<a-select <j-select
v-model:value="formData.mode" v-model:value="formData.mode"
:options="[ :options="[
{ label: '平台推送', value: 'push' }, { label: '平台推送', value: 'push' },
@ -41,14 +41,14 @@
:filter-option="filterOption" :filter-option="filterOption"
@change="changeMode" @change="changeMode"
:disabled="view" :disabled="view"
/> </a-form-item /> </j-form-item
></a-col> ></j-col>
<a-col :span="12" v-if="formData.mode === 'push'" <j-col :span="12" v-if="formData.mode === 'push'"
><a-form-item ><j-form-item
label="响应超时时间" label="响应超时时间"
name="responseTimeoutSeconds" name="responseTimeoutSeconds"
> >
<a-input-number <j-input-number
placeholder="请输入响应超时时间(秒)" placeholder="请输入响应超时时间(秒)"
style="width: 100%" style="width: 100%"
:min="1" :min="1"
@ -56,13 +56,13 @@
:disabled="view" :disabled="view"
v-model:value=" v-model:value="
formData.responseTimeoutSeconds formData.responseTimeoutSeconds
" /></a-form-item " /></j-form-item
></a-col> ></j-col>
<a-col <j-col
:span="formData.mode === 'push' ? 12 : 24" :span="formData.mode === 'push' ? 12 : 24"
v-if="formData.mode === 'push' || formData.mode === 'pull'" v-if="formData.mode === 'push' || formData.mode === 'pull'"
><a-form-item label="升级超时时间" name="timeoutSeconds"> ><j-form-item label="升级超时时间" name="timeoutSeconds">
<a-input-number <j-input-number
placeholder="请输入升级超时时间(秒)" placeholder="请输入升级超时时间(秒)"
style="width: 100%" style="width: 100%"
:min="1" :min="1"
@ -70,42 +70,42 @@
:disabled="view" :disabled="view"
v-model:value=" v-model:value="
formData.timeoutSeconds formData.timeoutSeconds
" /></a-form-item " /></j-form-item
></a-col> ></j-col>
<a-col :span="12" v-if="!!formData.mode" <j-col :span="12" v-if="!!formData.mode"
><a-form-item label="升级设备" name="releaseType"> ><j-form-item label="升级设备" name="releaseType">
<a-radio-group <j-radio-group
v-model:value="formData.releaseType" v-model:value="formData.releaseType"
button-style="solid" button-style="solid"
@change="changeShareCluster" @change="changeShareCluster"
:disabled="view" :disabled="view"
> >
<a-radio value="all">所有设备</a-radio> <j-radio value="all">所有设备</j-radio>
<a-radio value="part">选择设备</a-radio> <j-radio value="part">选择设备</j-radio>
</a-radio-group> </j-radio-group>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12" v-if="formData.releaseType === 'part'"> <j-col :span="12" v-if="formData.releaseType === 'part'">
<a-form-item label="选择设备" name="deviceId"> <j-form-item label="选择设备" name="deviceId">
<SelectDevices <SelectDevices
v-model:modelValue="formData.deviceId" v-model:modelValue="formData.deviceId"
:data="data" :data="data"
></SelectDevices> </a-form-item ></SelectDevices> </j-form-item
></a-col> ></j-col>
<a-col :span="24"> <j-col :span="24">
<a-form-item label="说明" name="description"> <j-form-item label="说明" name="description">
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
v-model:value="formData.description" v-model:value="formData.description"
:maxlength="200" :maxlength="200"
:rows="3" :rows="3"
showCount showCount
:disabled="view" :disabled="view"
/> </a-form-item /> </j-form-item
></a-col> ></j-col>
</a-row> </j-row>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup name="TaskPage"> <script lang="ts" setup name="TaskPage">
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';

54
src/views/device/Firmware/Task/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<page-container> <page-container>
<Search :columns="columns" target="search" @search="handleSearch" /> <Search :columns="columns" target="search" @search="handleSearch" />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
model="TABLE" model="TABLE"
:columns="columns" :columns="columns"
@ -29,37 +29,25 @@
<span>{{ slotProps.progress }}%</span> <span>{{ slotProps.progress }}%</span>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <j-space>
<a-tooltip <template v-for="i in getActions(slotProps)" :key="i.key">
v-for="i in getActions(slotProps)" <PermissionButton
:key="i.key" :disabled="i.disabled"
v-bind="i.tooltip" :popConfirm="i.popConfirm"
> :tooltip="{
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm"> ...i.tooltip,
<a-button }"
:disabled="i.disabled" style="padding: 0px"
style="padding: 0" @click="i.onClick"
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link" type="link"
v-else :hasPermission="'device/Firmware:' + i.key"
@click="i.onClick && i.onClick(slotProps)"
> >
<a-button <template #icon><AIcon :type="i.icon" /></template>
:disabled="i.disabled" </PermissionButton>
style="padding: 0" </template>
type="link" </j-space>
><AIcon :type="i.icon"
/></a-button>
</a-button>
</a-tooltip>
</a-space>
</template> </template>
</JTable> </j-pro-table>
<Save v-if="visible" :data="current" @change="saveChange" /> <Save v-if="visible" :data="current" @change="saveChange" />
</page-container> </page-container>
</template> </template>
@ -159,7 +147,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
const Actions = [ const Actions = [
{ {
key: 'details', key: 'view',
text: '详情', text: '详情',
tooltip: { tooltip: {
title: '详情', title: '详情',
@ -170,7 +158,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
}, },
}, },
{ {
key: 'eye', key: 'view',
text: '查看', text: '查看',
tooltip: { tooltip: {
title: '查看', title: '查看',
@ -184,7 +172,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
if (stop) { if (stop) {
Actions.push({ Actions.push({
key: 'actions', key: 'update',
text: '停止', text: '停止',
tooltip: { tooltip: {
title: '停止', title: '停止',
@ -200,7 +188,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
}); });
} else if (pause) { } else if (pause) {
Actions.push({ Actions.push({
key: 'actions', key: 'update',
text: '继续升级', text: '继续升级',
tooltip: { tooltip: {
title: '继续升级', title: '继续升级',

8
src/views/device/Firmware/index.vue
View File

@ -2,7 +2,7 @@
<page-container> <page-container>
<div> <div>
<Search :columns="columns" target="search" @search="handleSearch" /> <Search :columns="columns" target="search" @search="handleSearch" />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
model="TABLE" model="TABLE"
:columns="columns" :columns="columns"
@ -33,7 +33,7 @@
}}</span> }}</span>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space> <j-space>
<template <template
v-for="i in getActions(slotProps)" v-for="i in getActions(slotProps)"
:key="i.key" :key="i.key"
@ -54,9 +54,9 @@
/></template> /></template>
</PermissionButton> </PermissionButton>
</template> </template>
</a-space> </j-space>
</template> </template>
</JTable> </j-pro-table>
</div> </div>
<Save v-if="visible" :data="current" @change="saveChange" /> <Save v-if="visible" :data="current" @change="saveChange" />
</page-container> </page-container>

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

@ -1,7 +1,7 @@
<template> <template>
<page-container> <page-container>
<a-spin :spinning="loading"> <j-spin :spinning="loading">
<a-card :bordered="false"> <j-card :bordered="false">
<div v-if="type && id === ':id'"> <div v-if="type && id === ':id'">
<Provider <Provider
@onClick="goProviders" @onClick="goProviders"
@ -38,8 +38,8 @@
:data="data" :data="data"
/> />
</div> </div>
</a-card> </j-card>
</a-spin> </j-spin>
</page-container> </page-container>
</template> </template>

12
src/views/link/AccessConfig/components/AccessCard/index.vue
View File

@ -1,24 +1,24 @@
<template> <template>
<a-card <j-card
hoverable hoverable
:class="['card-render', checked === data.id ? 'checked' : '']" :class="['card-render', checked === data.id ? 'checked' : '']"
@click="checkedChange(data.id)" @click="checkedChange(data.id)"
> >
<div class="title"> <div class="title">
<a-tooltip placement="topLeft" :title="data.name">{{ <j-tooltip placement="topLeft" :title="data.name">{{
data.name data.name
}}</a-tooltip> }}</j-tooltip>
</div> </div>
<slot name="other"></slot> <slot name="other"></slot>
<div class="desc"> <div class="desc">
<a-tooltip placement="topLeft" :title="data.description">{{ <j-tooltip placement="topLeft" :title="data.description">{{
data.description data.description
}}</a-tooltip> }}</j-tooltip>
</div> </div>
<div class="checked-icon"> <div class="checked-icon">
<div><CheckOutlined /></div> <div><CheckOutlined /></div>
</div> </div>
</a-card> </j-card>
</template> </template>
<script lang="ts" setup name="AccessCard"> <script lang="ts" setup name="AccessCard">

32
src/views/link/AccessConfig/components/Channel/index.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<div class="container"> <div class="container">
<div v-if="type === 'channel'" class="card-last"> <div v-if="type === 'channel'" class="card-last">
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<title-component data="基本信息" /> <title-component data="基本信息" />
<div> <div>
<a-form <j-form
:model="formState" :model="formState"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
layout="vertical" layout="vertical"
@finish="onFinish" @finish="onFinish"
> >
<a-form-item <j-form-item
label="名称" label="名称"
name="name" name="name"
:rules="[ :rules="[
@ -24,21 +24,21 @@
{ max: 64, message: '最多可输入64个字符' }, { max: 64, message: '最多可输入64个字符' },
]" ]"
> >
<a-input <j-input
placeholder="请输入名称" placeholder="请输入名称"
v-model:value="formState.name" v-model:value="formState.name"
/> />
</a-form-item> </j-form-item>
<a-form-item label="说明" name="description"> <j-form-item label="说明" name="description">
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
:rows="4" :rows="4"
v-model:value="formState.description" v-model:value="formState.description"
show-count show-count
:maxlength="200" :maxlength="200"
/> />
</a-form-item> </j-form-item>
<a-form-item> <j-form-item>
<PermissionButton <PermissionButton
v-if="view === 'false'" v-if="view === 'false'"
type="primary" type="primary"
@ -49,11 +49,11 @@
> >
保存 保存
</PermissionButton> </PermissionButton>
</a-form-item> </j-form-item>
</a-form> </j-form>
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="config-right"> <div class="config-right">
<div class="config-right-item"> <div class="config-right-item">
<title-component data="配置概览" /> <title-component data="配置概览" />
@ -83,8 +83,8 @@
</div> </div>
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</div> </div>
</template> </template>

128
src/views/link/AccessConfig/components/Cloud/Ctwing.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="container"> <div class="container">
<a-steps class="steps-steps" :current="stepCurrent"> <j-steps class="steps-steps" :current="stepCurrent">
<a-step v-for="item in steps" :key="item" :title="item" /> <j-step v-for="item in steps" :key="item" :title="item" />
</a-steps> </j-steps>
<div class="steps-content"> <div class="steps-content">
<div class="steps-box" v-if="current === 0"> <div class="steps-box" v-if="current === 0">
<div class="alert"> <div class="alert">
@ -10,18 +10,18 @@
通过CTWing平台的HTTP推送服务进行数据接入 通过CTWing平台的HTTP推送服务进行数据接入
</div> </div>
<div style="margin-top: 15px"> <div style="margin-top: 15px">
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="16"> <j-col :span="16">
<a-form <j-form
:model="formState" :model="formState"
ref="formRef1" ref="formRef1"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
layout="vertical" layout="vertical"
> >
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="接口地址" label="接口地址"
name="apiAddress" name="apiAddress"
:rules="[ :rules="[
@ -30,16 +30,16 @@
}, },
]" ]"
> >
<a-input <j-input
disabled disabled
v-model:value=" v-model:value="
formState.apiAddress formState.apiAddress
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="appKey" label="appKey"
name="appKey" name="appKey"
:rules="[ :rules="[
@ -54,16 +54,16 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="formState.appKey" v-model:value="formState.appKey"
placeholder="请输入appKey" placeholder="请输入appKey"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="appSecret" label="appSecret"
name="appSecret" name="appSecret"
:rules="[ :rules="[
@ -78,23 +78,23 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value=" v-model:value="
formState.appSecret formState.appSecret
" "
placeholder="请输入appSecret" placeholder="请输入appSecret"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> </a-col> <j-col :span="12"> </j-col>
</a-row> </j-row>
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="24"> <j-col :span="24">
<a-form-item <j-form-item
label="说明" label="说明"
name="description" name="description"
> >
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
:rows="4" :rows="4"
v-model:value=" v-model:value="
@ -103,11 +103,11 @@
show-count show-count
:maxlength="200" :maxlength="200"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </a-form </j-row> </j-form
></a-col> ></j-col>
<a-col :span="8"> <j-col :span="8">
<div class="doc"> <div class="doc">
<h1>操作指引：</h1> <h1>操作指引：</h1>
<div> <div>
@ -122,7 +122,7 @@
</div> </div>
</div> </div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img1" /> <j-image width="100%" :src="img1" />
</div> </div>
<div> <div>
3、IOT端创建类型为CTWing的设备接入网关 3、IOT端创建类型为CTWing的设备接入网关
@ -131,13 +131,13 @@
4、IOT端创建产品，选中接入方式为CTWing,填写CTWing平台中的产品ID、Master-APIkey。 4、IOT端创建产品，选中接入方式为CTWing,填写CTWing平台中的产品ID、Master-APIkey。
</div> </div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img2" /> <j-image width="100%" :src="img2" />
</div> </div>
<div> <div>
5、IOT端添加设备，为每一台设备设置唯一的IMEI（需与CTWing平台中填写的值一致） 5、IOT端添加设备，为每一台设备设置唯一的IMEI（需与CTWing平台中填写的值一致）
</div> </div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img3" /> <j-image width="100%" :src="img3" />
</div> </div>
<h1>设备接入网关配置说明</h1> <h1>设备接入网关配置说明</h1>
<div> <div>
@ -145,15 +145,15 @@
Key和App Secret复制到当前页面 Key和App Secret复制到当前页面
</div> </div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img4" /> <j-image width="100%" :src="img4" />
</div> </div>
<h1>其他说明</h1> <h1>其他说明</h1>
<div> <div>
1.在IOT端启用设备时，若CTWing平台没有与之对应的设备，则将在CTWing端自动创建新设备 1.在IOT端启用设备时，若CTWing平台没有与之对应的设备，则将在CTWing端自动创建新设备
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</div> </div>
</div> </div>
@ -164,7 +164,7 @@
只能选择HTTP通信方式的协议 只能选择HTTP通信方式的协议
</div> </div>
<div class="search"> <div class="search">
<a-input-search <j-input-search
allowClear allowClear
placeholder="请输入" placeholder="请输入"
style="width: 300px" style="width: 300px"
@ -180,8 +180,8 @@
</PermissionButton> </PermissionButton>
</div> </div>
<div class="card-item"> <div class="card-item">
<a-row :gutter="[24, 24]" v-if="procotolList.length > 0"> <j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
<a-col <j-col
:span="8" :span="8"
v-for="item in procotolList" v-for="item in procotolList"
:key="item.id" :key="item.id"
@ -192,25 +192,25 @@
:data="item" :data="item"
> >
</access-card> </access-card>
</a-col> </j-col>
</a-row> </j-row>
<a-empty v-else description="暂无数据" /> <j-empty v-else description="暂无数据" />
</div> </div>
</div> </div>
</div> </div>
<div v-if="current === 2" class="card-last"> <div v-if="current === 2" class="card-last">
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<title-component data="基本信息" /> <title-component data="基本信息" />
<div> <div>
<a-form <j-form
:model="formData" :model="formData"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
layout="vertical" layout="vertical"
ref="formRef2" ref="formRef2"
> >
<a-form-item <j-form-item
label="名称" label="名称"
name="name" name="name"
:rules="[ :rules="[
@ -222,24 +222,24 @@
{ max: 64, message: '最多可输入64个字符' }, { max: 64, message: '最多可输入64个字符' },
]" ]"
> >
<a-input <j-input
placeholder="请输入名称" placeholder="请输入名称"
v-model:value="formData.name" v-model:value="formData.name"
/> />
</a-form-item> </j-form-item>
<a-form-item label="说明" name="description"> <j-form-item label="说明" name="description">
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
:rows="4" :rows="4"
v-model:value="formData.description" v-model:value="formData.description"
show-count show-count
:maxlength="200" :maxlength="200"
/> />
</a-form-item> </j-form-item>
</a-form> </j-form>
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="config-right"> <div class="config-right">
<div class="config-right-item"> <div class="config-right-item">
<title-component data="配置概览" /> <title-component data="配置概览" />
@ -275,18 +275,18 @@
</div> </div>
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
<div :class="current !== 2 ? 'steps-action' : 'steps-action-save'"> <div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
<a-button <j-button
v-if="[0, 1].includes(current)" v-if="[0, 1].includes(current)"
type="primary" type="primary"
style="margin-right: 8px" style="margin-right: 8px"
@click="next" @click="next"
> >
下一步 下一步
</a-button> </j-button>
<PermissionButton <PermissionButton
v-if="current === 2 && view === 'false'" v-if="current === 2 && view === 'false'"
type="primary" type="primary"
@ -298,7 +298,7 @@
> >
保存 保存
</PermissionButton> </PermissionButton>
<a-button v-if="current > 0" @click="prev"> 上一步 </a-button> <j-button v-if="current > 0" @click="prev"> 上一步 </j-button>
</div> </div>
</div> </div>
</template> </template>

194
src/views/link/AccessConfig/components/Cloud/OneNet.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="container"> <div class="container">
<a-steps class="steps-steps" :current="stepCurrent"> <j-steps class="steps-steps" :current="stepCurrent">
<a-step v-for="item in steps" :key="item" :title="item" /> <j-step v-for="item in steps" :key="item" :title="item" />
</a-steps> </j-steps>
<div class="steps-content"> <div class="steps-content">
<div class="steps-box" v-if="current === 0"> <div class="steps-box" v-if="current === 0">
<div class="alert"> <div class="alert">
@ -10,18 +10,18 @@
通过OneNet平台的HTTP推送服务进行数据接入 通过OneNet平台的HTTP推送服务进行数据接入
</div> </div>
<div style="margin-top: 15px"> <div style="margin-top: 15px">
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="16"> <j-col :span="16">
<a-form <j-form
:model="formState" :model="formState"
ref="formRef1" ref="formRef1"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
layout="vertical" layout="vertical"
> >
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="24"> <j-col :span="24">
<a-form-item <j-form-item
name="apiAddress" name="apiAddress"
:rules="[ :rules="[
{ {
@ -35,7 +35,7 @@
class="form-label-required" class="form-label-required"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
同步物联网平台设备数据到OneNet 同步物联网平台设备数据到OneNet
@ -44,20 +44,20 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input <j-input
disabled disabled
v-model:value=" v-model:value="
formState.apiAddress formState.apiAddress
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="24"> <j-col :span="24">
<a-form-item <j-form-item
label="apiKey" label="apiKey"
name="apiKey" name="apiKey"
:rules="[ :rules="[
@ -72,16 +72,16 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="formState.apiKey" v-model:value="formState.apiKey"
placeholder="请输入apiKey" placeholder="请输入apiKey"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
name="validateToken" name="validateToken"
:rules="[ :rules="[
{ {
@ -101,7 +101,7 @@
class="form-label-required" class="form-label-required"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
接收OneNet推送的Token地址 接收OneNet推送的Token地址
@ -110,18 +110,18 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input <j-input
v-model:value=" v-model:value="
formState.validateToken formState.validateToken
" "
placeholder="请输入通知Token" placeholder="请输入通知Token"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
name="aesKey" name="aesKey"
:rules="[ :rules="[
{ {
@ -133,7 +133,7 @@
> >
<div class="form-label"> <div class="form-label">
aesKey aesKey
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
OneNet OneNet
@ -143,21 +143,21 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input <j-input
v-model:value="formState.aesKey" v-model:value="formState.aesKey"
placeholder="请输入aesKey" placeholder="请输入aesKey"
/> </a-form-item /> </j-form-item
></a-col> ></j-col>
</a-row> </j-row>
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="24"> <j-col :span="24">
<a-form-item <j-form-item
label="说明" label="说明"
name="description" name="description"
> >
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
:rows="4" :rows="4"
v-model:value=" v-model:value="
@ -166,11 +166,11 @@
show-count show-count
:maxlength="200" :maxlength="200"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </a-form </j-row> </j-form
></a-col> ></j-col>
<a-col :span="8"> <j-col :span="8">
<div class="doc"> <div class="doc">
<h1>操作指引：</h1> <h1>操作指引：</h1>
<div> <div>
@ -183,76 +183,76 @@
3、IOT端创建产品，选中接入方式为OneNet类型的设备接入网关，填写Master-APIkey（OneNet端的产品Key） 3、IOT端创建产品，选中接入方式为OneNet类型的设备接入网关，填写Master-APIkey（OneNet端的产品Key）
</div> </div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img5" /> <j-image width="100%" :src="img5" />
</div> </div>
<div> <div>
4、IOT端添加设备，在设备实例页面为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中的值一致） 4、IOT端添加设备，在设备实例页面为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中的值一致）
</div> </div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img6" /> <j-image width="100%" :src="img6" />
</div> </div>
<h1>HTTP推送配置说明</h1> <h1>HTTP推送配置说明</h1>
<div class="image"> <div class="image">
<a-image width="100%" :src="img" /> <j-image width="100%" :src="img" />
</div> </div>
<div> <div>
HTTP推送配置路径：应用开发&gt;数据推送 HTTP推送配置路径：应用开发&gt;数据推送
</div> </div>
<a-descriptions <j-descriptions
bordered bordered
size="small" size="small"
:column="1" :column="1"
:labelStyle="{ width: '100px' }" :labelStyle="{ width: '100px' }"
> >
<a-descriptions-item label="参数" <j-descriptions-item label="参数"
>说明</a-descriptions-item >说明</j-descriptions-item
> >
<a-descriptions-item label="实例名称" <j-descriptions-item label="实例名称"
>推送实例的名称</a-descriptions-item >推送实例的名称</j-descriptions-item
> >
<a-descriptions-item label="推送地址"> <j-descriptions-item label="推送地址">
用于接收OneNet推送设备数据的地址物联网平台地址: 用于接收OneNet推送设备数据的地址物联网平台地址:
<div style="word-wrap: break-word"> <div style="word-wrap: break-word">
{{ {{
`${origin}/api/one-net/${randomString()}/notify` `${origin}/api/one-net/${randomString()}/notify`
}} }}
</div> </div>
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="Token"> <j-descriptions-item label="Token">
自定义token,可用于验证请求是否来自OneNet 自定义token,可用于验证请求是否来自OneNet
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="消息加密"> <j-descriptions-item label="消息加密">
采用AES加密算法对推送的数据进行数据加密，AesKey为加密秘钥 采用AES加密算法对推送的数据进行数据加密，AesKey为加密秘钥
</a-descriptions-item> </j-descriptions-item>
</a-descriptions> </j-descriptions>
<h1>设备接入网关配置说明</h1> <h1>设备接入网关配置说明</h1>
<a-descriptions <j-descriptions
bordered bordered
size="small" size="small"
:column="1" :column="1"
:labelStyle="{ width: '100px' }" :labelStyle="{ width: '100px' }"
> >
<a-descriptions-item label="参数" <j-descriptions-item label="参数"
>说明</a-descriptions-item >说明</j-descriptions-item
> >
<a-descriptions-item label="apiKey" <j-descriptions-item label="apiKey"
>OneNet平台中具体产品的Key</a-descriptions-item >OneNet平台中具体产品的Key</j-descriptions-item
> >
<a-descriptions-item label="通知Token"> <j-descriptions-item label="通知Token">
填写OneNet数据推送配置中设置的Token 填写OneNet数据推送配置中设置的Token
</a-descriptions-item> </j-descriptions-item>
<a-descriptions-item label="aesKey"> <j-descriptions-item label="aesKey">
若OneNet数据推送配置了消息加密，此处填写OneNet端数据推送配置中设置的aesKey 若OneNet数据推送配置了消息加密，此处填写OneNet端数据推送配置中设置的aesKey
</a-descriptions-item> </j-descriptions-item>
</a-descriptions> </j-descriptions>
<h1>其他说明</h1> <h1>其他说明</h1>
<div> <div>
1.在IOT端启用设备时，若OneNet平台没有与之对应的设备，则将在OneNet端自动创建新设备 1.在IOT端启用设备时，若OneNet平台没有与之对应的设备，则将在OneNet端自动创建新设备
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</div> </div>
</div> </div>
@ -263,7 +263,7 @@
只能选择HTTP通信方式的协议 只能选择HTTP通信方式的协议
</div> </div>
<div class="search"> <div class="search">
<a-input-search <j-input-search
allowClear allowClear
placeholder="请输入" placeholder="请输入"
style="width: 300px" style="width: 300px"
@ -279,8 +279,8 @@
</PermissionButton> </PermissionButton>
</div> </div>
<div class="card-item"> <div class="card-item">
<a-row :gutter="[24, 24]" v-if="procotolList.length > 0"> <j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
<a-col <j-col
:span="8" :span="8"
v-for="item in procotolList" v-for="item in procotolList"
:key="item.id" :key="item.id"
@ -291,25 +291,25 @@
:data="item" :data="item"
> >
</access-card> </access-card>
</a-col> </j-col>
</a-row> </j-row>
<a-empty v-else description="暂无数据" /> <j-empty v-else description="暂无数据" />
</div> </div>
</div> </div>
</div> </div>
<div v-if="current === 2" class="card-last"> <div v-if="current === 2" class="card-last">
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<title-component data="基本信息" /> <title-component data="基本信息" />
<div> <div>
<a-form <j-form
:model="formData" :model="formData"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
layout="vertical" layout="vertical"
ref="formRef2" ref="formRef2"
> >
<a-form-item <j-form-item
label="名称" label="名称"
name="name" name="name"
:rules="[ :rules="[
@ -321,24 +321,24 @@
{ max: 64, message: '最多可输入64个字符' }, { max: 64, message: '最多可输入64个字符' },
]" ]"
> >
<a-input <j-input
placeholder="请输入名称" placeholder="请输入名称"
v-model:value="formData.name" v-model:value="formData.name"
/> />
</a-form-item> </j-form-item>
<a-form-item label="说明" name="description"> <j-form-item label="说明" name="description">
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
:rows="4" :rows="4"
v-model:value="formData.description" v-model:value="formData.description"
show-count show-count
:maxlength="200" :maxlength="200"
/> />
</a-form-item> </j-form-item>
</a-form> </j-form>
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="config-right"> <div class="config-right">
<div class="config-right-item"> <div class="config-right-item">
<title-component data="配置概览" /> <title-component data="配置概览" />
@ -374,18 +374,18 @@
</div> </div>
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
<div :class="current !== 2 ? 'steps-action' : 'steps-action-save'"> <div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
<a-button <j-button
v-if="[0, 1].includes(current)" v-if="[0, 1].includes(current)"
type="primary" type="primary"
style="margin-right: 8px" style="margin-right: 8px"
@click="next" @click="next"
> >
下一步 下一步
</a-button> </j-button>
<PermissionButton <PermissionButton
style="margin-right: 8px" style="margin-right: 8px"
v-if="current === 2 && view === 'false'" v-if="current === 2 && view === 'false'"
@ -397,7 +397,7 @@
> >
保存 保存
</PermissionButton> </PermissionButton>
<a-button v-if="current > 0" @click="prev"> 上一步 </a-button> <j-button v-if="current > 0" @click="prev"> 上一步 </j-button>
</div> </div>
</div> </div>
</template> </template>

64
src/views/link/AccessConfig/components/Edge/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div v-if="type === 'edge'" class="container"> <div v-if="type === 'edge'" class="container">
<a-steps <j-steps
v-if="channel !== 'edge-child-device'" v-if="channel !== 'edge-child-device'"
class="steps-steps" class="steps-steps"
:current="stepCurrent" :current="stepCurrent"
> >
<a-step v-for="item in steps" :key="item" :title="item" /> <j-step v-for="item in steps" :key="item" :title="item" />
</a-steps> </j-steps>
<div v-if="channel !== 'edge-child-device'" class="steps-content"> <div v-if="channel !== 'edge-child-device'" class="steps-content">
<div class="steps-box" v-if="current === 0"> <div class="steps-box" v-if="current === 0">
<div class="alert"> <div class="alert">
@ -14,7 +14,7 @@
选择与设备通信的网络组件 选择与设备通信的网络组件
</div> </div>
<div class="search"> <div class="search">
<a-input-search <j-input-search
allowClear allowClear
placeholder="请输入" placeholder="请输入"
style="width: 300px" style="width: 300px"
@ -30,8 +30,8 @@
</PermissionButton> </PermissionButton>
</div> </div>
<div class="card-item"> <div class="card-item">
<a-row :gutter="[24, 24]" v-if="networkList.length > 0"> <j-row :gutter="[24, 24]" v-if="networkList.length > 0">
<a-col <j-col
:span="8" :span="8"
v-for="item in networkList" v-for="item in networkList"
:key="item.id" :key="item.id"
@ -48,7 +48,7 @@
> >
<template #other> <template #other>
<div class="other"> <div class="other">
<a-tooltip placement="topLeft"> <j-tooltip placement="topLeft">
<div <div
v-if=" v-if="
(item.addresses || []) (item.addresses || [])
@ -61,7 +61,7 @@
:key="i.address" :key="i.address"
class="item" class="item"
> >
<a-badge <j-badge
:color=" :color="
i.health === -1 i.health === -1
? 'red' ? 'red'
@ -77,7 +77,7 @@
:key="i.address" :key="i.address"
class="item" class="item"
> >
<a-badge <j-badge
:color=" :color="
i.health === -1 i.health === -1
? 'red' ? 'red'
@ -93,13 +93,13 @@
>...</span >...</span
> >
</div> </div>
</a-tooltip> </j-tooltip>
</div> </div>
</template> </template>
</access-card> </access-card>
</a-col> </j-col>
</a-row> </j-row>
<a-empty v-else description="暂无数据" /> <j-empty v-else description="暂无数据" />
</div> </div>
</div> </div>
</div> </div>
@ -107,10 +107,10 @@
v-if="channel === 'edge-child-device' || current === 1" v-if="channel === 'edge-child-device' || current === 1"
class="card-last" class="card-last"
> >
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<title-component data="基本信息" /> <title-component data="基本信息" />
<a-form <j-form
:model="formState" :model="formState"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
@ -118,7 +118,7 @@
@finish="onFinish" @finish="onFinish"
ref="formRef" ref="formRef"
> >
<a-form-item <j-form-item
label="名称" label="名称"
name="name" name="name"
:rules="[ :rules="[
@ -130,21 +130,21 @@
{ max: 64, message: '最多可输入64个字符' }, { max: 64, message: '最多可输入64个字符' },
]" ]"
> >
<a-input <j-input
placeholder="请输入名称" placeholder="请输入名称"
v-model:value="formState.name" v-model:value="formState.name"
/> />
</a-form-item> </j-form-item>
<a-form-item label="说明" name="description"> <j-form-item label="说明" name="description">
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
:rows="4" :rows="4"
v-model:value="formState.description" v-model:value="formState.description"
show-count show-count
:maxlength="200" :maxlength="200"
/> />
</a-form-item> </j-form-item>
<a-form-item> <j-form-item>
<PermissionButton <PermissionButton
v-if="current !== 1 && view === 'false'" v-if="current !== 1 && view === 'false'"
type="primary" type="primary"
@ -155,10 +155,10 @@
> >
保存 保存
</PermissionButton> </PermissionButton>
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="config-right"> <div class="config-right">
<div class="config-right-item"> <div class="config-right-item">
<title-component data="配置概览" /> <title-component data="配置概览" />
@ -173,20 +173,20 @@
</div> </div>
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
<div <div
v-if="channel !== 'edge-child-device'" v-if="channel !== 'edge-child-device'"
:class="current !== 1 ? 'steps-action' : 'steps-action-save'" :class="current !== 1 ? 'steps-action' : 'steps-action-save'"
> >
<a-button <j-button
v-if="[0].includes(current)" v-if="[0].includes(current)"
style="margin-right: 8px" style="margin-right: 8px"
@click="next" @click="next"
> >
下一步 下一步
</a-button> </j-button>
<PermissionButton <PermissionButton
v-if="current === 1 && view === 'false'" v-if="current === 1 && view === 'false'"
type="primary" type="primary"
@ -198,7 +198,7 @@
> >
保存 保存
</PermissionButton> </PermissionButton>
<a-button v-if="current > 0" @click="prev"> 上一步 </a-button> <j-button v-if="current > 0" @click="prev"> 上一步 </j-button>
</div> </div>
</div> </div>
</template> </template>

220
src/views/link/AccessConfig/components/Media/GB28181.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<a-steps :current="stepCurrent"> <j-steps :current="stepCurrent">
<a-step v-for="item in steps" :key="item" :title="item" /> <j-step v-for="item in steps" :key="item" :title="item" />
</a-steps> </j-steps>
<div class="steps-content"> <div class="steps-content">
<div class="steps-box" v-if="current === 0"> <div class="steps-box" v-if="current === 0">
<div class="alert"> <div class="alert">
@ -10,16 +10,16 @@
配置设备信令参数 配置设备信令参数
</div> </div>
<div> <div>
<a-form <j-form
:model="formState" :model="formState"
ref="formRef1" ref="formRef1"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
layout="vertical" layout="vertical"
> >
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="SIP 域" label="SIP 域"
name="domain" name="domain"
:rules="[ :rules="[
@ -33,14 +33,14 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="formState.domain" v-model:value="formState.domain"
placeholder="请输入SIP 域" placeholder="请输入SIP 域"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="SIP ID" label="SIP ID"
name="sipId" name="sipId"
:rules="[ :rules="[
@ -54,15 +54,15 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="formState.sipId" v-model:value="formState.sipId"
placeholder="请输入SIP ID" placeholder="请输入SIP ID"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-form-item <j-form-item
name="shareCluster" name="shareCluster"
:rules="[ :rules="[
{ {
@ -76,7 +76,7 @@
<span style="color: red; margin: 0 4px 0 -2px" <span style="color: red; margin: 0 4px 0 -2px"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
共享配置:集群下所有节点共用同一配置 共享配置:集群下所有节点共用同一配置
@ -86,20 +86,20 @@
</p> </p>
</template> </template>
<AIcon type="QuestionCircleOutlined" /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </j-tooltip>
</div> </div>
<a-radio-group <j-radio-group
v-model:value="formState.shareCluster" v-model:value="formState.shareCluster"
> >
<a-radio :value="true">共享配置</a-radio> <j-radio :value="true">共享配置</j-radio>
<a-radio :value="false">独立配置</a-radio> <j-radio :value="false">独立配置</j-radio>
</a-radio-group> </j-radio-group>
</a-form-item> </j-form-item>
<div v-if="formState.shareCluster" class="form-item1"> <div v-if="formState.shareCluster" class="form-item1">
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="6"> <j-col :span="6">
<a-form-item <j-form-item
label="SIP 地址" label="SIP 地址"
:name="['hostPort', 'host']" :name="['hostPort', 'host']"
:rules="[ :rules="[
@ -109,7 +109,7 @@
}, },
]" ]"
> >
<a-select <j-select
v-model:value=" v-model:value="
formState.hostPort.host formState.hostPort.host
" "
@ -118,14 +118,14 @@
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
> >
<a-select-option value="0.0.0.0" <j-select-option value="0.0.0.0"
>0.0.0.0</a-select-option >0.0.0.0</j-select-option
> >
</a-select> </j-select>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="6"> <j-col :span="6">
<a-form-item <j-form-item
:name="['hostPort', 'port']" :name="['hostPort', 'port']"
:rules="[ :rules="[
{ {
@ -136,7 +136,7 @@
> >
<div class="form-label"></div> <div class="form-label"></div>
<a-select <j-select
v-model:value=" v-model:value="
formState.hostPort.port formState.hostPort.port
" "
@ -146,10 +146,10 @@
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="6"> <j-col :span="6">
<a-form-item <j-form-item
label="公网 Host" label="公网 Host"
:name="['hostPort', 'publicHost']" :name="['hostPort', 'publicHost']"
:rules="[ :rules="[
@ -164,17 +164,17 @@
}, },
]" ]"
> >
<a-input <j-input
style="width: 105%" style="width: 105%"
v-model:value=" v-model:value="
formState.hostPort.publicHost formState.hostPort.publicHost
" "
placeholder="请输入IP地址" placeholder="请输入IP地址"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="6"> <j-col :span="6">
<a-form-item <j-form-item
:name="['hostPort', 'publicPort']" :name="['hostPort', 'publicPort']"
:rules="[ :rules="[
{ {
@ -185,7 +185,7 @@
> >
<div class="form-label"></div> <div class="form-label"></div>
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
placeholder="请输入端口" placeholder="请输入端口"
v-model:value=" v-model:value="
@ -194,13 +194,13 @@
:min="1" :min="1"
:max="65535" :max="65535"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</a-form> </j-form>
<div v-if="!formState.shareCluster"> <div v-if="!formState.shareCluster">
<a-form <j-form
ref="formRef2" ref="formRef2"
layout="vertical" layout="vertical"
name="dynamic_form_nest_item" name="dynamic_form_nest_item"
@ -212,17 +212,17 @@
) in dynamicValidateForm.cluster" ) in dynamicValidateForm.cluster"
:key="cluster.id" :key="cluster.id"
> >
<a-collapse v-model:activeKey="activeKey"> <j-collapse v-model:activeKey="activeKey">
<a-collapse-panel <j-collapse-panel
:key="cluster.id" :key="cluster.id"
:header="`#${index + 1}.节点`" :header="`#${index + 1}.节点`"
> >
<template #extra> <template #extra>
<AIcon type="DeleteOutlined" /> <AIcon type="DeleteOutlined" />
</template> </template>
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="8"> <j-col :span="8">
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -232,7 +232,7 @@
<div class="form-label"> <div class="form-label">
节点名称 节点名称
</div> </div>
<a-select <j-select
v-model:value=" v-model:value="
cluster.clusterNodeId cluster.clusterNodeId
" "
@ -244,11 +244,11 @@
filterOption filterOption
" "
> >
</a-select> </j-select>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="4"> <j-col :span="4">
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -266,7 +266,7 @@
class="form-label-required" class="form-label-required"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0 绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
@ -275,10 +275,10 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-select <j-select
v-model:value=" v-model:value="
cluster.host cluster.host
" "
@ -296,11 +296,11 @@
) )
" "
> >
</a-select> </j-select>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="4"> <j-col :span="4">
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -314,7 +314,7 @@
<div <div
class="form-label" class="form-label"
></div> ></div>
<a-select <j-select
v-model:value=" v-model:value="
cluster.port cluster.port
" "
@ -328,10 +328,10 @@
filterOption filterOption
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="4"> <j-col :span="4">
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -357,7 +357,7 @@
class="form-label-required" class="form-label-required"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
监听指定端口的请求 监听指定端口的请求
@ -366,9 +366,9 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input <j-input
style="width: 110%" style="width: 110%"
v-model:value=" v-model:value="
cluster.publicHost cluster.publicHost
@ -376,10 +376,10 @@
placeholder="请输入IP地址" placeholder="请输入IP地址"
allowClear allowClear
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="4"> <j-col :span="4">
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -397,7 +397,7 @@
class="form-label" class="form-label"
></div> ></div>
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
placeholder="请输入端口" placeholder="请输入端口"
v-model:value=" v-model:value="
@ -406,14 +406,14 @@
:min="1" :min="1"
:max="65535" :max="65535"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</a-collapse-panel> </j-collapse-panel>
</a-collapse> </j-collapse>
</div> </div>
<a-form-item> <j-form-item>
<a-button <j-button
style="margin-top: 10px" style="margin-top: 10px"
type="dashed" type="dashed"
block block
@ -421,9 +421,9 @@
> >
<AIcon type="PlusOutlined" /> <AIcon type="PlusOutlined" />
新增 新增
</a-button> </j-button>
</a-form-item> </j-form-item>
</a-form> </j-form>
</div> </div>
</div> </div>
</div> </div>
@ -434,38 +434,38 @@
clientHeight > 900 ? 750 : clientHeight * 0.7 clientHeight > 900 ? 750 : clientHeight * 0.7
}px`" }px`"
> >
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<title-component data="基本信息" /> <title-component data="基本信息" />
<div> <div>
<a-form :model="formData" layout="vertical"> <j-form :model="formData" layout="vertical">
<a-form-item <j-form-item
label="名称" label="名称"
v-bind="validateInfos.name" v-bind="validateInfos.name"
> >
<a-input <j-input
v-model:value="formData.name" v-model:value="formData.name"
allowClear allowClear
placeholder="请输入名称" placeholder="请输入名称"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="说明" label="说明"
v-bind="validateInfos.description" v-bind="validateInfos.description"
> >
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
:rows="4" :rows="4"
v-model:value="formData.description" v-model:value="formData.description"
show-count show-count
:maxlength="200" :maxlength="200"
/> />
</a-form-item> </j-form-item>
</a-form> </j-form>
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="config-right"> <div class="config-right">
<div class="config-right-item"> <div class="config-right-item">
<div class="config-right-item-title"> <div class="config-right-item-title">
@ -491,19 +491,19 @@
</div> </div>
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</div> </div>
</div> </div>
<div class="steps-action"> <div class="steps-action">
<a-button <j-button
v-if="[0].includes(current)" v-if="[0].includes(current)"
style="margin-right: 8px" style="margin-right: 8px"
@click="next" @click="next"
> >
下一步 下一步
</a-button> </j-button>
<PermissionButton <PermissionButton
v-if="current === 1 && view === 'false'" v-if="current === 1 && view === 'false'"
type="primary" type="primary"
@ -515,7 +515,7 @@
> >
保存 保存
</PermissionButton> </PermissionButton>
<a-button v-if="current > 0" @click="prev"> 上一步 </a-button> <j-button v-if="current > 0" @click="prev"> 上一步 </j-button>
</div> </div>
</div> </div>
</template> </template>

32
src/views/link/AccessConfig/components/Media/index.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<div class="container"> <div class="container">
<div v-if="channel === 'fixed-media'" class="card-last"> <div v-if="channel === 'fixed-media'" class="card-last">
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<title-component data="基本信息" /> <title-component data="基本信息" />
<div> <div>
<a-form <j-form
:model="formState" :model="formState"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
layout="vertical" layout="vertical"
@finish="onFinish" @finish="onFinish"
> >
<a-form-item <j-form-item
label="名称" label="名称"
name="name" name="name"
:rules="[ :rules="[
@ -24,21 +24,21 @@
{ max: 64, message: '最多可输入64个字符' }, { max: 64, message: '最多可输入64个字符' },
]" ]"
> >
<a-input <j-input
placeholder="请输入名称" placeholder="请输入名称"
v-model:value="formState.name" v-model:value="formState.name"
/> />
</a-form-item> </j-form-item>
<a-form-item label="说明" name="description"> <j-form-item label="说明" name="description">
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
:rows="4" :rows="4"
v-model:value="formState.description" v-model:value="formState.description"
show-count show-count
:maxlength="200" :maxlength="200"
/> />
</a-form-item> </j-form-item>
<a-form-item> <j-form-item>
<PermissionButton <PermissionButton
v-if="view === 'false'" v-if="view === 'false'"
type="primary" type="primary"
@ -49,11 +49,11 @@
> >
保存 保存
</PermissionButton> </PermissionButton>
</a-form-item> </j-form-item>
</a-form> </j-form>
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="config-right"> <div class="config-right">
<div class="config-right-item"> <div class="config-right-item">
<div class="config-right-item-title">接入方式</div> <div class="config-right-item-title">接入方式</div>
@ -75,8 +75,8 @@
</div> </div>
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
<div v-else-if="channel === 'gb28181'"> <div v-else-if="channel === 'gb28181'">
<GB28181 :provider="props.provider" :data="props.data"></GB28181> <GB28181 :provider="props.provider" :data="props.data"></GB28181>

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

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<a-steps :current="stepCurrent"> <j-steps :current="stepCurrent">
<a-step v-for="item in steps" :key="item" :title="item" /> <j-step v-for="item in steps" :key="item" :title="item" />
</a-steps> </j-steps>
<div class="steps-content"> <div class="steps-content">
<div class="steps-box" v-if="current === 0"> <div class="steps-box" v-if="current === 0">
<div class="alert"> <div class="alert">
@ -10,7 +10,7 @@
选择与设备通信的网络组件 选择与设备通信的网络组件
</div> </div>
<div class="search"> <div class="search">
<a-input-search <j-input-search
allowClear allowClear
placeholder="请输入" placeholder="请输入"
style="width: 300px" style="width: 300px"
@ -26,8 +26,8 @@
</PermissionButton> </PermissionButton>
</div> </div>
<div class="card-item"> <div class="card-item">
<a-row :gutter="[24, 24]" v-if="networkList.length > 0"> <j-row :gutter="[24, 24]" v-if="networkList.length > 0">
<a-col <j-col
:span="8" :span="8"
v-for="item in networkList" v-for="item in networkList"
:key="item.id" :key="item.id"
@ -44,7 +44,7 @@
> >
<template #other> <template #other>
<div class="other"> <div class="other">
<a-tooltip placement="topLeft"> <j-tooltip placement="topLeft">
<div <div
v-if=" v-if="
(item.addresses || []) (item.addresses || [])
@ -57,7 +57,7 @@
:key="i.address" :key="i.address"
class="item" class="item"
> >
<a-badge <j-badge
:color="getColor(i)" :color="getColor(i)"
/>{{ i.address }} />{{ i.address }}
</div> </div>
@ -69,7 +69,7 @@
:key="i.address" :key="i.address"
class="item" class="item"
> >
<a-badge <j-badge
:color="getColor(i)" :color="getColor(i)"
:text="i.address" :text="i.address"
/> />
@ -81,13 +81,13 @@
>...</span >...</span
> >
</div> </div>
</a-tooltip> </j-tooltip>
</div> </div>
</template> </template>
</access-card> </access-card>
</a-col> </j-col>
</a-row> </j-row>
<a-empty v-else description="暂无数据" /> <j-empty v-else description="暂无数据" />
</div> </div>
</div> </div>
<div class="steps-box" v-else-if="current === 1"> <div class="steps-box" v-else-if="current === 1">
@ -96,7 +96,7 @@
使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作 使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作
</div> </div>
<div class="search"> <div class="search">
<a-input-search <j-input-search
allowClear allowClear
placeholder="请输入" placeholder="请输入"
style="width: 300px" style="width: 300px"
@ -112,8 +112,8 @@
</PermissionButton> </PermissionButton>
</div> </div>
<div class="card-item"> <div class="card-item">
<a-row :gutter="[24, 24]" v-if="procotolList.length > 0"> <j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
<a-col <j-col
:span="8" :span="8"
v-for="item in procotolList" v-for="item in procotolList"
:key="item?.id" :key="item?.id"
@ -124,9 +124,9 @@
:data="item" :data="item"
> >
</access-card> </access-card>
</a-col> </j-col>
</a-row> </j-row>
<a-empty v-else description="暂无数据" /> <j-empty v-else description="暂无数据" />
</div> </div>
</div> </div>
<div class="steps-box" v-else> <div class="steps-box" v-else>
@ -136,41 +136,41 @@
clientHeight > 900 ? 750 : clientHeight * 0.7 clientHeight > 900 ? 750 : clientHeight * 0.7
}px`" }px`"
> >
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12"> <j-col :span="12">
<title-component data="基本信息" /> <title-component data="基本信息" />
<div> <div>
<a-form <j-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
layout="vertical" layout="vertical"
> >
<a-form-item <j-form-item
label="名称" label="名称"
v-bind="validateInfos.name" v-bind="validateInfos.name"
> >
<a-input <j-input
v-model:value="formData.name" v-model:value="formData.name"
allowClear allowClear
placeholder="请输入名称" placeholder="请输入名称"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="说明" label="说明"
v-bind="validateInfos.description" v-bind="validateInfos.description"
> >
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
:rows="4" :rows="4"
v-model:value="formData.description" v-model:value="formData.description"
show-count show-count
:maxlength="200" :maxlength="200"
/> />
</a-form-item> </j-form-item>
</a-form> </j-form>
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="config-right"> <div class="config-right">
<div class="config-right-item"> <div class="config-right-item">
<div class="config-right-item-title"> <div class="config-right-item-title">
@ -212,7 +212,7 @@
v-for="i in getNetworkCurrentData()" v-for="i in getNetworkCurrentData()"
:key="i.address" :key="i.address"
> >
<a-badge <j-badge
:color="getColor(i)" :color="getColor(i)"
:text="i.address" :text="i.address"
/> />
@ -235,10 +235,10 @@
: 'URL信息' : 'URL信息'
}} }}
</div> </div>
<a-table <j-table
:pagination="false" :pagination="false"
:rowKey="generateUUID()" :rowKey="generateUUID()"
:data-source="config.routes || []" :datj-source="config.routes || []"
bordered bordered
:columns=" :columns="
config.id === 'MQTT' config.id === 'MQTT'
@ -261,23 +261,23 @@
}}</span> }}</span>
</template> </template>
</template> </template>
</a-table> </j-table>
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</div> </div>
</div> </div>
<div class="steps-action"> <div class="steps-action">
<a-button <j-button
v-if="[0, 1].includes(current)" v-if="[0, 1].includes(current)"
type="primary" type="primary"
style="margin-right: 8px" style="margin-right: 8px"
@click="next" @click="next"
> >
下一步 下一步
</a-button> </j-button>
<PermissionButton <PermissionButton
v-if="current === 2 && view === 'false'" v-if="current === 2 && view === 'false'"
type="primary" type="primary"
@ -289,12 +289,12 @@
> >
保存 保存
</PermissionButton> </PermissionButton>
<a-button <j-button
v-if="type === 'child-device' ? current > 1 : current > 0" v-if="type === 'child-device' ? current > 1 : current > 0"
@click="prev" @click="prev"
> >
上一步 上一步
</a-button> </j-button>
</div> </div>
</div> </div>
</template> </template>

16
src/views/link/AccessConfig/components/Provider/index.vue
View File

@ -2,8 +2,8 @@
<div v-for="items in dataSource" :key="items.type" class="card-items"> <div v-for="items in dataSource" :key="items.type" class="card-items">
<div class="card-items-container"> <div class="card-items-container">
<TitleComponent :data="items.title"></TitleComponent> <TitleComponent :data="items.title"></TitleComponent>
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="12" v-for="item in items.list" :key="item.id"> <j-col :span="12" v-for="item in items.list" :key="item.id">
<div class="provider"> <div class="provider">
<div class="box"> <div class="box">
<div class="left"> <div class="left">
@ -15,21 +15,21 @@
{{ item.name }} {{ item.name }}
</div> </div>
<div class="desc"> <div class="desc">
<a-tooltip :title="item.description"> <j-tooltip :title="item.description">
{{ item.description || '' }} {{ item.description || '' }}
</a-tooltip> </j-tooltip>
</div> </div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<a-button type="primary" @click="click(item)" <j-button type="primary" @click="click(item)"
>接入</a-button >接入</j-button
> >
</div> </div>
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</div> </div>
</template> </template>

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

@ -3,7 +3,7 @@
<div> <div>
<Search :columns="columns" target="search" @search="handleSearch" /> <Search :columns="columns" target="search" @search="handleSearch" />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
model="CARD" model="CARD"
:columns="columns" :columns="columns"
@ -16,7 +16,7 @@
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>
<a-space> <j-space>
<PermissionButton <PermissionButton
type="primary" type="primary"
@click="handlAdd" @click="handlAdd"
@ -27,7 +27,7 @@
/></template> /></template>
新增 新增
</PermissionButton> </PermissionButton>
</a-space> </j-space>
</template> </template>
<template #card="slotProps"> <template #card="slotProps">
<CardBox <CardBox
@ -63,8 +63,8 @@
{{ slotProps.name }} {{ slotProps.name }}
</PermissionButton> </PermissionButton>
<a-row class="card-item-content-box"> <j-row class="card-item-content-box">
<a-col <j-col
:span="12" :span="12"
v-if="slotProps.channelInfo" v-if="slotProps.channelInfo"
class="card-item-content-text" class="card-item-content-text"
@ -78,10 +78,10 @@
slotProps.channelInfo.addresses slotProps.channelInfo.addresses
" "
> >
<a-badge <j-badge
:status="getStatus(slotProps)" :status="getStatus(slotProps)"
/> />
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
slotProps.channelInfo slotProps.channelInfo
.addresses[0].address .addresses[0].address
@ -90,10 +90,10 @@
slotProps.channelInfo slotProps.channelInfo
.addresses[0].address .addresses[0].address
}} }}
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if="slotProps.protocolDetail" v-if="slotProps.protocolDetail"
> >
@ -101,7 +101,7 @@
协议 协议
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
slotProps.protocolDetail slotProps.protocolDetail
.name .name
@ -110,14 +110,14 @@
slotProps.protocolDetail slotProps.protocolDetail
.name .name
}} }}
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
<a-row> <j-row>
<a-col :span="24"> <j-col :span="24">
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title> <template #title>
{{ {{
getDescription( getDescription(
@ -126,10 +126,10 @@
}} }}
</template> </template>
{{ getDescription(slotProps) }} {{ getDescription(slotProps) }}
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</template> </template>
@ -156,12 +156,12 @@
</CardBox> </CardBox>
</template> </template>
<template #state="slotProps"> <template #state="slotProps">
<a-badge <j-badge
:text="slotProps.state.text" :text="slotProps.state.text"
:status="statusMap.get(slotProps.state.value)" :status="statusMap.get(slotProps.state.value)"
/> />
</template> </template>
</JTable> </j-pro-table>
</div> </div>
</page-container> </page-container>
</template> </template>

14
src/views/link/Certificate/Detail/CertificateFile.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<a-spin :spinning="loading"> <j-spin :spinning="loading">
<div> <div>
<a-textarea <j-textarea
:rows="4" :rows="4"
@change="textChange" @change="textChange"
v-model:value="keystoreBase64" v-model:value="keystoreBase64"
:placeholder="placeholder" :placeholder="placeholder"
/> />
<a-upload <j-upload
accept=".pem" accept=".pem"
listType="text" listType="text"
:action="NETWORK_CERTIFICATE_UPLOAD" :action="NETWORK_CERTIFICATE_UPLOAD"
@ -17,13 +17,13 @@
:showUploadList="false" :showUploadList="false"
@change="handleChange" @change="handleChange"
> >
<a-button style="margin-top: 10px"> <j-button style="margin-top: 10px">
<upload-outlined /> <upload-outlined />
上传文件</a-button 上传文件</j-button
> >
</a-upload> </j-upload>
</div> </div>
</a-spin> </j-spin>
</template> </template>
<script setup lang="ts" name="CertificateFile"> <script setup lang="ts" name="CertificateFile">

60
src/views/link/Certificate/Detail/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<page-container> <page-container>
<a-card> <j-card>
<a-row :gutter="[24, 24]" style="padding: 24px"> <j-row :gutter="[24, 24]" style="padding: 24px">
<a-col :span="12"> <j-col :span="12">
<a-form <j-form
class="form" class="form"
layout="vertical" layout="vertical"
:model="formData" :model="formData"
@ -12,30 +12,30 @@
:wrapper-col="{ span: 16 }" :wrapper-col="{ span: 16 }"
autocomplete="off" autocomplete="off"
> >
<a-form-item <j-form-item
label="证书标准" label="证书标准"
v-bind="validateInfos.type" v-bind="validateInfos.type"
> >
<a-radio-group v-model:value="formData.type"> <j-radio-group v-model:value="formData.type">
<a-radio-button <j-radio-button
class="form-radio-button" class="form-radio-button"
value="common" value="common"
> >
<img :src="getImage('/certificate.png')" /> <img :src="getImage('/certificate.png')" />
</a-radio-button> </j-radio-button>
</a-radio-group> </j-radio-group>
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="证书名称" label="证书名称"
v-bind="validateInfos.name" v-bind="validateInfos.name"
> >
<a-input <j-input
placeholder="请输入证书名称" placeholder="请输入证书名称"
v-model:value="formData.name" v-model:value="formData.name"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="证书文件" label="证书文件"
v-bind="validateInfos['configs.cert']" v-bind="validateInfos['configs.cert']"
> >
@ -44,8 +44,8 @@
v-model:modelValue="formData.configs.cert" v-model:modelValue="formData.configs.cert"
placeholder='证书格式以"-----BEGIN CERTIFICATE-----"开头，以"-----END CERTIFICATE-----"结尾"' placeholder='证书格式以"-----BEGIN CERTIFICATE-----"开头，以"-----END CERTIFICATE-----"结尾"'
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="证书私钥" label="证书私钥"
v-bind="validateInfos['configs.key']" v-bind="validateInfos['configs.key']"
> >
@ -54,31 +54,31 @@
v-model:modelValue="formData.configs.key" v-model:modelValue="formData.configs.key"
placeholder='证书私钥格式以"-----BEGIN (RSA|EC) PRIVATE KEY-----"开头，以"-----END(RSA|EC) PRIVATE KEY-----"结尾。' placeholder='证书私钥格式以"-----BEGIN (RSA|EC) PRIVATE KEY-----"开头，以"-----END(RSA|EC) PRIVATE KEY-----"结尾。'
/> />
</a-form-item> </j-form-item>
<a-form-item label="说明" name="description"> <j-form-item label="说明" name="description">
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
v-model:value="formData.description" v-model:value="formData.description"
:maxlength="200" :maxlength="200"
:rows="3" :rows="3"
showCount showCount
/> />
</a-form-item> </j-form-item>
<a-form-item> <j-form-item>
<a-button <j-button
v-if="view === 'false'" v-if="view === 'false'"
class="form-submit" class="form-submit"
html-type="submit" html-type="submit"
type="primary" type="primary"
@click.prevent="onSubmit" @click.prevent="onSubmit"
:loading="loading" :loading="loading"
>保存</a-button >保存</j-button
> >
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="doc"> <div class="doc">
<h1>1. 概述</h1> <h1>1. 概述</h1>
<div> <div>
@ -95,9 +95,9 @@
您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。 您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</a-card> </j-card>
</page-container> </page-container>
</template> </template>

8
src/views/link/Certificate/index.vue
View File

@ -2,7 +2,7 @@
<page-container> <page-container>
<div> <div>
<Search :columns="columns" target="search" @search="handleSearch" /> <Search :columns="columns" target="search" @search="handleSearch" />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
model="TABLE" model="TABLE"
:columns="columns" :columns="columns"
@ -26,7 +26,7 @@
<span>{{ slotProps.type.text }}</span> <span>{{ slotProps.type.text }}</span>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space> <j-space>
<template <template
v-for="i in getActions(slotProps)" v-for="i in getActions(slotProps)"
:key="i.key" :key="i.key"
@ -47,9 +47,9 @@
/></template> /></template>
</PermissionButton> </PermissionButton>
</template> </template>
</a-space> </j-space>
</template> </template>
</JTable> </j-pro-table>
</div> </div>
</page-container> </page-container>
</template> </template>

24
src/views/link/DashBoard/components/Cpu.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<a-spin :spinning="loading"> <j-spin :spinning="loading">
<div class="dash-board"> <div class="dash-board">
<div class="header"> <div class="header">
<h3>CPU使用率趋势</h3> <h3>CPU使用率趋势</h3>
<a-range-picker <j-range-picker
@change="pickerTimeChange" @change="pickerTimeChange"
:allowClear="false" :allowClear="false"
:show-time="{ format: 'HH:mm:ss' }" :show-time="{ format: 'HH:mm:ss' }"
@ -14,28 +14,28 @@
><AIcon type="CalendarOutlined" ><AIcon type="CalendarOutlined"
/></template> /></template>
<template #renderExtraFooter> <template #renderExtraFooter>
<a-radio-group <j-radio-group
default-value="a" default-value="a"
button-style="solid" button-style="solid"
style="margin-right: 10px" style="margin-right: 10px"
v-model:value="data.type" v-model:value="data.type"
> >
<a-radio-button value="hour"> <j-radio-button value="hour">
最近1小时 最近1小时
</a-radio-button> </j-radio-button>
<a-radio-button value="today"> <j-radio-button value="today">
今日 今日
</a-radio-button> </j-radio-button>
<a-radio-button value="week"> <j-radio-button value="week">
近一周 近一周
</a-radio-button> </j-radio-button>
</a-radio-group></template </j-radio-group></template
> >
</a-range-picker> </j-range-picker>
</div> </div>
<div ref="chartRef" style="width: 100%; height: 300px"></div> <div ref="chartRef" style="width: 100%; height: 300px"></div>
</div> </div>
</a-spin> </j-spin>
</template> </template>
m m
<script lang="ts" setup name="Cpu"> <script lang="ts" setup name="Cpu">

24
src/views/link/DashBoard/components/Jvm.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<a-spin :spinning="loading"> <j-spin :spinning="loading">
<div class="dash-board"> <div class="dash-board">
<div class="header"> <div class="header">
<h3>JVM内存使用率趋势</h3> <h3>JVM内存使用率趋势</h3>
<a-range-picker <j-range-picker
@change="pickerTimeChange" @change="pickerTimeChange"
:allowClear="false" :allowClear="false"
:show-time="{ format: 'HH:mm:ss' }" :show-time="{ format: 'HH:mm:ss' }"
@ -14,28 +14,28 @@
><AIcon type="CalendarOutlined" ><AIcon type="CalendarOutlined"
/></template> /></template>
<template #renderExtraFooter> <template #renderExtraFooter>
<a-radio-group <j-radio-group
default-value="a" default-value="a"
button-style="solid" button-style="solid"
style="margin-right: 10px" style="margin-right: 10px"
v-model:value="data.type" v-model:value="data.type"
> >
<a-radio-button value="hour"> <j-radio-button value="hour">
最近1小时 最近1小时
</a-radio-button> </j-radio-button>
<a-radio-button value="today"> <j-radio-button value="today">
今日 今日
</a-radio-button> </j-radio-button>
<a-radio-button value="week"> <j-radio-button value="week">
近一周 近一周
</a-radio-button> </j-radio-button>
</a-radio-group></template </j-radio-group></template
> >
</a-range-picker> </j-range-picker>
</div> </div>
<div ref="chartRef" style="width: 100%; height: 300px"></div> <div ref="chartRef" style="width: 100%; height: 300px"></div>
</div> </div>
</a-spin> </j-spin>
</template> </template>
<script lang="ts" setup name="Jvm"> <script lang="ts" setup name="Jvm">

32
src/views/link/DashBoard/components/Network.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<a-spin :spinning="loading"> <j-spin :spinning="loading">
<div class="dash-board"> <div class="dash-board">
<div class="header"> <div class="header">
<div class="left"> <div class="left">
<h3 style="width: 80px">网络流量</h3> <h3 style="width: 80px">网络流量</h3>
<a-radio-group <j-radio-group
button-style="solid" button-style="solid"
v-model:value="data.type" v-model:value="data.type"
> >
<a-radio-button value="bytesRead"> <j-radio-button value="bytesRead">
上行 上行
</a-radio-button> </j-radio-button>
<a-radio-button value="bytesSent"> <j-radio-button value="bytesSent">
下行 下行
</a-radio-button> </j-radio-button>
</a-radio-group> </j-radio-group>
</div> </div>
<div class="right"> <div class="right">
<a-radio-group <j-radio-group
default-value="a" default-value="a"
button-style="solid" button-style="solid"
style="margin-right: 10px" style="margin-right: 10px"
v-model:value="data.time.type" v-model:value="data.time.type"
> >
<a-radio-button value="hour"> <j-radio-button value="hour">
最近1小时 最近1小时
</a-radio-button> </j-radio-button>
<a-radio-button value="today"> 今日 </a-radio-button> <j-radio-button value="today"> 今日 </j-radio-button>
<a-radio-button value="week"> 近一周 </a-radio-button> <j-radio-button value="week"> 近一周 </j-radio-button>
</a-radio-group> </j-radio-group>
<a-range-picker <j-range-picker
:allowClear="false" :allowClear="false"
:show-time="{ format: 'HH:mm:ss' }" :show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
@ -39,14 +39,14 @@
<template #suffixIcon <template #suffixIcon
><AIcon type="CalendarOutlined" ><AIcon type="CalendarOutlined"
/></template> /></template>
</a-range-picker> </j-range-picker>
</div> </div>
</div> </div>
<div> <div>
<div ref="chartRef" style="width: 100%; height: 350px"></div> <div ref="chartRef" style="width: 100%; height: 350px"></div>
</div> </div>
</div> </div>
</a-spin> </j-spin>
</template> </template>
<script lang="ts" setup name="Network"> <script lang="ts" setup name="Network">

4
src/views/link/DashBoard/components/TopCard.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div> <div>
<a-select <j-select
style="width: 300px; margin-bottom: 20px" style="width: 300px; margin-bottom: 20px"
@change="serverIdChange" @change="serverIdChange"
:value="serverId" :value="serverId"
:options="serverNodeOptions" :options="serverNodeOptions"
v-if="serverNodeOptions.length > 1" v-if="serverNodeOptions.length > 1"
></a-select> ></j-select>
<div class="dash-board"> <div class="dash-board">
<div class="dash-board-item"> <div class="dash-board-item">
<TopEchartsItemNode title="CPU使用率" :value="topValues.cpu" /> <TopEchartsItemNode title="CPU使用率" :value="topValues.cpu" />

12
src/views/link/DashBoard/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<page-container> <page-container>
<div> <div>
<a-row :gutter="[24, 24]"> <j-row :gutter="[24, 24]">
<a-col :span="24"><TopCard /> </a-col> <j-col :span="24"><TopCard /> </j-col>
<a-col :span="24"><Network /></a-col> <j-col :span="24"><Network /></j-col>
<a-col :span="12"><Cpu /></a-col> <j-col :span="12"><Cpu /></j-col>
<a-col :span="12"><Jvm /></a-col> <j-col :span="12"><Jvm /></j-col>
</a-row> </j-row>
</div> </div>
</page-container> </page-container>
</template> </template>

14
src/views/link/Protocol/Save/FileUpload.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<a-spin :spinning="loading"> <j-spin :spinning="loading">
<a-input <j-input
placeholder="请上传文件" placeholder="请上传文件"
v-model:value="value" v-model:value="value"
style="width: calc(100% - 100px)" style="width: calc(100% - 100px)"
:disabled="true" :disabled="true"
/> />
<a-upload <j-upload
name="file" name="file"
accept=".jar, .zip" accept=".jar, .zip"
:multiple="true" :multiple="true"
@ -19,9 +19,9 @@
class="upload-box" class="upload-box"
:before-upload="beforeUpload" :before-upload="beforeUpload"
> >
<a-button type="primary">上传jar包</a-button> <j-button type="primary">上传jar包</j-button>
</a-upload> </j-upload>
</a-spin> </j-spin>
</template> </template>
<script setup lang="ts" name="FileUpload"> <script setup lang="ts" name="FileUpload">
@ -46,7 +46,7 @@ const loading = ref(false);
const beforeUpload: UploadProps['beforeUpload'] = (file) => { const beforeUpload: UploadProps['beforeUpload'] = (file) => {
const arr = file.name.split('.'); const arr = file.name.split('.');
const isFile = ['jar', 'zip'].includes(arr[arr.length - 1]); // file.type === 'application/zip' || file.type === 'application/java-archive' const isFile = ['jar', 'zip'].includes(arr[arr.length - 1]); // file.type === 'application/zip' || file.type === 'application/javj-archive'
if (!isFile) { if (!isFile) {
message.error('请上传.zip.jar格式的文件'); message.error('请上传.zip.jar格式的文件');
loading.value = false; loading.value = false;

32
src/views/link/Protocol/Save/index.vue
View File

@ -1,24 +1,24 @@
<template lang=""> <template lang="">
<a-modal <j-modal
:title="data.id ? '编辑' : '新增'" :title="data.id ? '编辑' : '新增'"
:visible="true" :visible="true"
width="700px" width="700px"
@cancel="handleCancel" @cancel="handleCancel"
> >
<a-form <j-form
class="form" class="form"
layout="vertical" layout="vertical"
:model="formData" :model="formData"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
> >
<a-form-item label="名称" v-bind="validateInfos.name"> <j-form-item label="名称" v-bind="validateInfos.name">
<a-input <j-input
placeholder="请输入名称" placeholder="请输入名称"
v-model:value="formData.name" v-model:value="formData.name"
/> />
</a-form-item> </j-form-item>
<a-form-item label="类型" v-bind="validateInfos.type"> <j-form-item label="类型" v-bind="validateInfos.type">
<RadioCard <RadioCard
:disabled="!!id" :disabled="!!id"
layout="horizontal" layout="horizontal"
@ -26,12 +26,12 @@
:options="options" :options="options"
v-model="formData.type" v-model="formData.type"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="文件地址" label="文件地址"
v-bind="validateInfos['configuration.location']" v-bind="validateInfos['configuration.location']"
> >
<a-input <j-input
v-if="formData.type === 'local'" v-if="formData.type === 'local'"
placeholder="请输入文件地址" placeholder="请输入文件地址"
v-model:value="formData.configuration.location" v-model:value="formData.configuration.location"
@ -40,19 +40,19 @@
v-else v-else
v-model:modelValue="formData.configuration.location" v-model:modelValue="formData.configuration.location"
/> />
</a-form-item> </j-form-item>
<a-form-item label="说明" v-bind="validateInfos.description"> <j-form-item label="说明" v-bind="validateInfos.description">
<a-textarea <j-textarea
placeholder="请输入说明" placeholder="请输入说明"
v-model:value="formData.description" v-model:value="formData.description"
:maxlength="200" :maxlength="200"
:rows="3" :rows="3"
showCount showCount
/> />
</a-form-item> </j-form-item>
</a-form> </j-form>
<template #footer> <template #footer>
<a-button key="back" @click="handleCancel">取消</a-button> <j-button key="back" @click="handleCancel">取消</j-button>
<PermissionButton <PermissionButton
key="submit" key="submit"
type="primary" type="primary"
@ -64,7 +64,7 @@
确认 确认
</PermissionButton> </PermissionButton>
</template> </template>
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { message, Form } from 'ant-design-vue'; import { message, Form } from 'ant-design-vue';

32
src/views/link/Protocol/index.vue
View File

@ -3,7 +3,7 @@
<div> <div>
<Search :columns="columns" target="search" @search="handleSearch" /> <Search :columns="columns" target="search" @search="handleSearch" />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
:columns="columns" :columns="columns"
:request="list" :request="list"
@ -36,7 +36,7 @@
</template> </template>
<template #content> <template #content>
<div class="card-item-content"> <div class="card-item-content">
<a-tooltip> <j-tooltip>
<template #title> <template #title>
{{ slotProps.name }} {{ slotProps.name }}
</template> </template>
@ -45,9 +45,9 @@
> >
{{ slotProps.name }} {{ slotProps.name }}
</h3> </h3>
</a-tooltip> </j-tooltip>
<a-row class="card-item-content-box"> <j-row class="card-item-content-box">
<a-col <j-col
:span="12" :span="12"
class="card-item-content-text" class="card-item-content-text"
> >
@ -55,28 +55,28 @@
ID ID
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
slotProps.id slotProps.id
}}</template> }}</template>
{{ slotProps.id }} {{ slotProps.id }}
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
类型 类型
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
slotProps.type slotProps.type
}}</template> }}</template>
{{ slotProps.type }} {{ slotProps.type }}
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</template> </template>
<template #actions="item"> <template #actions="item">
@ -102,7 +102,7 @@
</CardBox> </CardBox>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space> <j-space>
<template <template
v-for="i in getActions(slotProps, 'table')" v-for="i in getActions(slotProps, 'table')"
:key="i.key" :key="i.key"
@ -123,9 +123,9 @@
/></template> /></template>
</PermissionButton> </PermissionButton>
</template> </template>
</a-space> </j-space>
</template> </template>
</JTable> </j-pro-table>
</div> </div>
<Save v-if="visible" :data="current" @change="saveChange" /> <Save v-if="visible" :data="current" @change="saveChange" />
</page-container> </page-container>

364
src/views/link/Type/Detail/index.vue
View File

@ -1,34 +1,34 @@
<template> <template>
<page-container> <page-container>
<a-card> <j-card>
<div class="container"> <div class="container">
<a-form <j-form
:model="formData" :model="formData"
ref="formRef1" ref="formRef1"
name="basic" name="basic"
autocomplete="off" autocomplete="off"
layout="vertical" layout="vertical"
> >
<a-row :gutter="[24, 0]"> <j-row :gutter="[24, 0]">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="名称" label="名称"
name="name" name="name"
:rules="Rules.name" :rules="Rules.name"
> >
<a-input <j-input
v-model:value="formData.name" v-model:value="formData.name"
placeholder="请输入名称" placeholder="请输入名称"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="类型" label="类型"
name="type" name="type"
:rules="Rules.type" :rules="Rules.type"
> >
<a-select <j-select
v-model:value="formData.type" v-model:value="formData.type"
:options="typeOptions" :options="typeOptions"
placeholder="请选择类型" placeholder="请选择类型"
@ -37,17 +37,17 @@
:filter-option="filterOption" :filter-option="filterOption"
@change="changeType" @change="changeType"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="24"> <j-col :span="24">
<a-form-item <j-form-item
name="shareCluster" name="shareCluster"
:rules="Rules.shareCluster" :rules="Rules.shareCluster"
> >
<div class="form-label"> <div class="form-label">
集群 集群
<span class="form-label-required">*</span> <span class="form-label-required">*</span>
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
共享配置:集群下所有节点共用同一配置 共享配置:集群下所有节点共用同一配置
@ -57,9 +57,9 @@
</p> </p>
</template> </template>
<AIcon type="QuestionCircleOutlined" /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </j-tooltip>
</div> </div>
<a-radio-group <j-radio-group
v-model:value="formData.shareCluster" v-model:value="formData.shareCluster"
button-style="solid" button-style="solid"
@change=" @change="
@ -68,18 +68,18 @@
) )
" "
> >
<a-radio-button :value="true" <j-radio-button :value="true"
>共享配置</a-radio-button >共享配置</j-radio-button
> >
<a-radio-button :value="false" <j-radio-button :value="false"
>独立配置</a-radio-button >独立配置</j-radio-button
> >
</a-radio-group> </j-radio-group>
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-form <j-form
ref="formRef2" ref="formRef2"
layout="vertical" layout="vertical"
name="dynamic_form_nest_item" name="dynamic_form_nest_item"
@ -91,11 +91,11 @@
) in dynamicValidateForm.cluster" ) in dynamicValidateForm.cluster"
:key="cluster.id" :key="cluster.id"
> >
<a-collapse <j-collapse
v-model:activeKey="activeKey" v-model:activeKey="activeKey"
class="collapse" class="collapse"
> >
<a-collapse-panel <j-collapse-panel
:key="cluster.id" :key="cluster.id"
:header="`#${index + 1}.节点`" :header="`#${index + 1}.节点`"
> >
@ -105,9 +105,9 @@
type="DeleteOutlined" type="DeleteOutlined"
/> />
</template> </template>
<a-row :gutter="[24, 0]"> <j-row :gutter="[24, 0]">
<a-col :span="12" v-if="!shareCluster"> <j-col :span="12" v-if="!shareCluster">
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -121,7 +121,7 @@
>*</span >*</span
> >
</div> </div>
<a-select <j-select
v-model:value=" v-model:value="
cluster.serverId cluster.serverId
" "
@ -141,16 +141,16 @@
) )
" "
> >
</a-select> </j-select>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible('host', formData.type) isVisible('host', formData.type)
" "
> >
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -165,7 +165,7 @@
class="form-label-required" class="form-label-required"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0 绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
@ -174,10 +174,10 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-select <j-select
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.host .host
@ -202,16 +202,16 @@
) )
" "
> >
</a-select> </j-select>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible('port', formData.type) isVisible('port', formData.type)
" "
> >
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -226,7 +226,7 @@
class="form-label-required" class="form-label-required"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
监听指定端口的请求 监听指定端口的请求
@ -235,9 +235,9 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-select <j-select
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.port .port
@ -252,9 +252,9 @@
filterPortOption filterPortOption
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -263,7 +263,7 @@
) )
" "
> >
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -279,7 +279,7 @@
class="form-label-required" class="form-label-required"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
对外提供访问的地址,内网环境时填写服务器的内网IP地址 对外提供访问的地址,内网环境时填写服务器的内网IP地址
@ -288,9 +288,9 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input <j-input
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.publicHost .publicHost
@ -298,9 +298,9 @@
placeholder="请输入公网地址" placeholder="请输入公网地址"
allowClear allowClear
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -309,7 +309,7 @@
) )
" "
> >
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -324,7 +324,7 @@
class="form-label-required" class="form-label-required"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
对外提供访问的端口 对外提供访问的端口
@ -333,10 +333,10 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
placeholder="请输入端口" placeholder="请输入端口"
v-model:value=" v-model:value="
@ -346,9 +346,9 @@
:min="1" :min="1"
:max="65535" :max="65535"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -357,7 +357,7 @@
) )
" "
> >
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -374,16 +374,16 @@
> >
</div> </div>
<a-input <j-input
placeholder="请输入远程地址" placeholder="请输入远程地址"
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.remoteHost .remoteHost
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -392,7 +392,7 @@
) )
" "
> >
<a-form-item <j-form-item
label="远程端口" label="远程端口"
:name="[ :name="[
'cluster', 'cluster',
@ -402,7 +402,7 @@
]" ]"
:rules="Rules.remotePort" :rules="Rules.remotePort"
> >
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
placeholder="请输入远程端口" placeholder="请输入远程端口"
v-model:value=" v-model:value="
@ -412,9 +412,9 @@
:min="1" :min="1"
:max="65535" :max="65535"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -423,7 +423,7 @@
) )
" "
> >
<a-form-item <j-form-item
label="clientId" label="clientId"
:name="[ :name="[
'cluster', 'cluster',
@ -433,17 +433,17 @@
]" ]"
:rules="Rules.clientId" :rules="Rules.clientId"
> >
<a-input <j-input
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.clientId .clientId
" "
placeholder="请输入ClientId" placeholder="请输入ClientId"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -452,7 +452,7 @@
) )
" "
> >
<a-form-item <j-form-item
label="用户名" label="用户名"
:name="[ :name="[
'cluster', 'cluster',
@ -462,16 +462,16 @@
]" ]"
:rules="Rules.username" :rules="Rules.username"
> >
<a-input <j-input
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.username .username
" "
placeholder="请输入用户名" placeholder="请输入用户名"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -480,7 +480,7 @@
) )
" "
> >
<a-form-item <j-form-item
label="密码" label="密码"
:name="[ :name="[
'cluster', 'cluster',
@ -490,16 +490,16 @@
]" ]"
:rules="Rules.password" :rules="Rules.password"
> >
<a-input-password <j-input-password
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.password .password
" "
placeholder="请输入密码" placeholder="请输入密码"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -508,7 +508,7 @@
) )
" "
> >
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -519,7 +519,7 @@
> >
<div class="form-label"> <div class="form-label">
订阅前缀 订阅前缀
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share 当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share
@ -528,19 +528,19 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input <j-input
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.topicPrefix .topicPrefix
" "
placeholder="请输入订阅前缀" placeholder="请输入订阅前缀"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -549,7 +549,7 @@
) )
" "
> >
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -564,7 +564,7 @@
class="form-label-required" class="form-label-required"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
单次收发消息的最大长度,单位:字节;设置过大可能会影响性能 单次收发消息的最大长度,单位:字节;设置过大可能会影响性能
@ -573,9 +573,9 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
@ -585,10 +585,10 @@
:min="1024" :min="1024"
:max="1073741824" :max="1073741824"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="24"> <j-col :span="24">
<a-form-item <j-form-item
:label=" :label="
isVisible( isVisible(
'secure', 'secure',
@ -605,27 +605,27 @@
]" ]"
:rules="Rules.secure" :rules="Rules.secure"
> >
<a-radio-group <j-radio-group
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.secure .secure
" "
> >
<a-radio :value="true" <j-radio :value="true"
>是</a-radio >是</j-radio
> >
<a-radio :value="false" <j-radio :value="false"
>否</a-radio >否</j-radio
> >
</a-radio-group> </j-radio-group>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if="cluster.configuration.secure" v-if="cluster.configuration.secure"
> >
<a-form-item <j-form-item
label="证书" label="证书"
:name="[ :name="[
'cluster', 'cluster',
@ -635,7 +635,7 @@
]" ]"
:rules="Rules.certId" :rules="Rules.certId"
> >
<a-select <j-select
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.certId .certId
@ -648,13 +648,13 @@
filterOption filterOption
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if="cluster.configuration.secure" v-if="cluster.configuration.secure"
> >
<a-form-item <j-form-item
label="私钥别名" label="私钥别名"
:name="[ :name="[
'cluster', 'cluster',
@ -664,16 +664,16 @@
]" ]"
:rules="Rules.privateKeyAlias" :rules="Rules.privateKeyAlias"
> >
<a-input <j-input
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.privateKeyAlias .privateKeyAlias
" "
placeholder="请输入私钥别名" placeholder="请输入私钥别名"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="24" :span="24"
v-if=" v-if="
isVisible( isVisible(
@ -682,7 +682,7 @@
) )
" "
> >
<a-form-item <j-form-item
:name="[ :name="[
'cluster', 'cluster',
index, index,
@ -697,7 +697,7 @@
class="form-label-required" class="form-label-required"
>*</span >*</span
> >
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
处理TCP粘拆包的方式 处理TCP粘拆包的方式
@ -706,9 +706,9 @@
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
/> />
</a-tooltip> </j-tooltip>
</div> </div>
<a-select <j-select
style="width: 48.5%" style="width: 48.5%"
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
@ -730,10 +730,10 @@
) )
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -743,7 +743,7 @@
) )
" "
> >
<a-form-item <j-form-item
label="分隔符" label="分隔符"
:name="[ :name="[
'cluster', 'cluster',
@ -754,7 +754,7 @@
]" ]"
:rules="Rules.delimited" :rules="Rules.delimited"
> >
<a-input <j-input
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.parserConfiguration .parserConfiguration
@ -762,9 +762,9 @@
" "
placeholder="请输入分隔符" placeholder="请输入分隔符"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="24" :span="24"
v-if=" v-if="
isVisible( isVisible(
@ -774,7 +774,7 @@
) )
" "
> >
<a-form-item <j-form-item
v-show="false" v-show="false"
label="脚本语言" label="脚本语言"
:name="[ :name="[
@ -785,16 +785,16 @@
'lang', 'lang',
]" ]"
> >
<a-input <j-input
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
.parserConfiguration .parserConfiguration
.lang .lang
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="24" :span="24"
v-if=" v-if="
isVisible( isVisible(
@ -804,7 +804,7 @@
) )
" "
> >
<a-form-item <j-form-item
label="解析脚本" label="解析脚本"
:name="[ :name="[
'cluster', 'cluster',
@ -831,9 +831,9 @@
" "
/> />
</div> </div>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -843,7 +843,7 @@
) )
" "
> >
<a-form-item <j-form-item
label="长度值" label="长度值"
:name="[ :name="[
'cluster', 'cluster',
@ -854,7 +854,7 @@
]" ]"
:rules="Rules.size" :rules="Rules.size"
> >
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
@ -863,9 +863,9 @@
" "
placeholder="请输入长度值" placeholder="请输入长度值"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -875,7 +875,7 @@
) )
" "
> >
<a-form-item <j-form-item
label="长度" label="长度"
:name="[ :name="[
'cluster', 'cluster',
@ -886,7 +886,7 @@
]" ]"
:rules="Rules.length" :rules="Rules.length"
> >
<a-select <j-select
style="width: 100%" style="width: 100%"
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
@ -901,9 +901,9 @@
filterOption filterOption
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -913,7 +913,7 @@
) )
" "
> >
<a-form-item <j-form-item
label="偏移量" label="偏移量"
:name="[ :name="[
'cluster', 'cluster',
@ -924,7 +924,7 @@
]" ]"
:rules="Rules.offset" :rules="Rules.offset"
> >
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
@ -935,9 +935,9 @@
:min="0" :min="0"
:max="65535" :max="65535"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col <j-col
:span="12" :span="12"
v-if=" v-if="
isVisible( isVisible(
@ -947,7 +947,7 @@
) )
" "
> >
<a-form-item <j-form-item
label="大小端" label="大小端"
:name="[ :name="[
'cluster', 'cluster',
@ -957,7 +957,7 @@
'little', 'little',
]" ]"
> >
<a-select <j-select
style="width: 100%" style="width: 100%"
v-model:value=" v-model:value="
cluster.configuration cluster.configuration
@ -972,32 +972,32 @@
filterOption filterOption
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</a-collapse-panel> </j-collapse-panel>
</a-collapse> </j-collapse>
</div> </div>
<a-form-item v-if="!shareCluster"> <j-form-item v-if="!shareCluster">
<a-button type="dashed" block @click="addCluster"> <j-button type="dashed" block @click="addCluster">
<AIcon type="PlusOutlined" /> <AIcon type="PlusOutlined" />
新增 新增
</a-button> </j-button>
</a-form-item> </j-form-item>
</a-form> </j-form>
<a-row :gutter="[24, 0]"> <j-row :gutter="[24, 0]">
<a-col :span="24"> <j-col :span="24">
<a-form-item label="说明" name="description"> <j-form-item label="说明" name="description">
<a-textarea <j-textarea
v-model:value="formData.description" v-model:value="formData.description"
show-count show-count
:maxlength="200" :maxlength="200"
:rows="4" :rows="4"
/> </a-form-item /> </j-form-item
></a-col> ></j-col>
</a-row> </j-row>
</a-form> </j-form>
</div> </div>
<div class="footer"> <div class="footer">
<PermissionButton <PermissionButton
@ -1010,7 +1010,7 @@
保存 保存
</PermissionButton> </PermissionButton>
</div> </div>
</a-card> </j-card>
</page-container> </page-container>
</template> </template>

32
src/views/link/Type/index.vue
View File

@ -3,7 +3,7 @@
<div> <div>
<Search :columns="columns" target="search" @search="handleSearch" /> <Search :columns="columns" target="search" @search="handleSearch" />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
:columns="columns" :columns="columns"
:gridColumn="3" :gridColumn="3"
@ -56,36 +56,36 @@
> >
{{ slotProps.name }} {{ slotProps.name }}
</PermissionButton> </PermissionButton>
<a-row class="card-item-content-box"> <j-row class="card-item-content-box">
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
类型 类型
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
slotProps.type slotProps.type
}}</template> }}</template>
{{ slotProps.type }} {{ slotProps.type }}
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
详情 详情
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
getDetails(slotProps) getDetails(slotProps)
}}</template> }}</template>
<span class="details-text">{{ <span class="details-text">{{
getDetails(slotProps) getDetails(slotProps)
}}</span> }}</span>
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</template> </template>
<template #actions="item"> <template #actions="item">
@ -111,7 +111,7 @@
</CardBox> </CardBox>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space> <j-space>
<template <template
v-for="i in getActions(slotProps, 'table')" v-for="i in getActions(slotProps, 'table')"
:key="i.key" :key="i.key"
@ -132,10 +132,10 @@
/></template> /></template>
</PermissionButton> </PermissionButton>
</template> </template>
</a-space> </j-space>
</template> </template>
<template #state="slotProps"> <template #state="slotProps">
<a-badge <j-badge
:text="slotProps.state.text" :text="slotProps.state.text"
:status="statusMap.get(slotProps.state.value)" :status="statusMap.get(slotProps.state.value)"
/> />
@ -153,7 +153,7 @@
<template #details="slotProps"> <template #details="slotProps">
{{ getDetails(slotProps) }} {{ getDetails(slotProps) }}
</template> </template>
</JTable> </j-pro-table>
</div> </div>
</page-container> </page-container>
</template> </template>
@ -346,7 +346,7 @@ const handlEdit = (id: string) => {
const getDetails = (slotProps: Partial<Record<string, any>>) => { const getDetails = (slotProps: Partial<Record<string, any>>) => {
const { typeObject, shareCluster, configuration, cluster } = slotProps; const { typeObject, shareCluster, configuration, cluster } = slotProps;
const headers = const headers =
typeObject.name.replace(/[^a-zA-Z]/g, '').toLowerCase() + '://'; typeObject.name.replace(/[^j-zA-Z]/g, '').toLowerCase() + '://';
const content = !!shareCluster const content = !!shareCluster
? (configuration.publicHost || configuration.remoteHost) + ? (configuration.publicHost || configuration.remoteHost) +
':' + ':' +

138
src/views/media/Stream/Detail/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<page-container> <page-container>
<a-card> <j-card>
<a-form <j-form
ref="formRef" ref="formRef"
class="form" class="form"
layout="vertical" layout="vertical"
@ -9,9 +9,9 @@
name="basic" name="basic"
autocomplete="off" autocomplete="off"
> >
<a-row :gutter="[16, 0]"> <j-row :gutter="[16, 0]">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="流媒体名称" label="流媒体名称"
name="name" name="name"
:rules="[ :rules="[
@ -25,14 +25,14 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="formData.name" v-model:value="formData.name"
placeholder="请输入流媒体名称" placeholder="请输入流媒体名称"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="服务商" label="服务商"
name="provider" name="provider"
:rules="[ :rules="[
@ -42,16 +42,16 @@
}, },
]" ]"
> >
<a-select <j-select
ref="select" ref="select"
v-model:value="formData.provider" v-model:value="formData.provider"
:options="options" :options="options"
placeholder="请选择服务商" placeholder="请选择服务商"
></a-select> ></j-select>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="密钥" label="密钥"
:name="['configuration', 'secret']" :name="['configuration', 'secret']"
:rules="[ :rules="[
@ -61,14 +61,14 @@
}, },
]" ]"
> >
<a-input-password <j-input-password
placeholder="请输入密钥" placeholder="请输入密钥"
v-model:value="formData.configuration.secret" v-model:value="formData.configuration.secret"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="8" class="form-item"> <j-col :span="8" class="form-item">
<a-form-item <j-form-item
:name="['configuration', 'apiHost']" :name="['configuration', 'apiHost']"
:rules="[ :rules="[
{ {
@ -84,22 +84,22 @@
<div class="form-label"> <div class="form-label">
API Host API Host
<span class="form-label-required">*</span> <span class="form-label-required">*</span>
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p>调用流媒体接口时请求的服务地址</p> <p>调用流媒体接口时请求的服务地址</p>
</template> </template>
<AIcon type="QuestionCircleOutlined" /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input <j-input
placeholder="请输入API Host" placeholder="请输入API Host"
v-model:value="formData.configuration.apiHost" v-model:value="formData.configuration.apiHost"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="4"> <j-col :span="4">
<a-form-item <j-form-item
class="form-item" class="form-item"
:name="['configuration', 'apiPort']" :name="['configuration', 'apiPort']"
:rules="[ :rules="[
@ -111,7 +111,7 @@
> >
<div class="form-label"></div> <div class="form-label"></div>
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
:min="1" :min="1"
:max="65535" :max="65535"
@ -119,10 +119,10 @@
placeholder="请输入输入端口" placeholder="请输入输入端口"
v-model:value="formData.configuration.apiPort" v-model:value="formData.configuration.apiPort"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="8" class="form-item"> <j-col :span="8" class="form-item">
<a-form-item <j-form-item
:name="['configuration', 'rtpIp']" :name="['configuration', 'rtpIp']"
:rules="[ :rules="[
{ {
@ -138,24 +138,24 @@
<div class="form-label"> <div class="form-label">
RTP IP RTP IP
<span class="form-label-required">*</span> <span class="form-label-required">*</span>
<a-tooltip> <j-tooltip>
<template #title> <template #title>
<p> <p>
视频设备将流推送到该IP地址下，部分设备仅支持IP地址，建议全是用IP地址 视频设备将流推送到该IP地址下，部分设备仅支持IP地址，建议全是用IP地址
</p> </p>
</template> </template>
<AIcon type="QuestionCircleOutlined" /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </j-tooltip>
</div> </div>
<a-input <j-input
placeholder="请输入RTP IP" placeholder="请输入RTP IP"
v-model:value="formData.configuration.rtpIp" v-model:value="formData.configuration.rtpIp"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="4" v-if="!checked"> <j-col :span="4" v-if="!checked">
<a-form-item <j-form-item
class="form-item" class="form-item"
:name="['configuration', 'rtpPort']" :name="['configuration', 'rtpPort']"
:rules="[ :rules="[
@ -167,7 +167,7 @@
> >
<div class="form-label"></div> <div class="form-label"></div>
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
:min="1" :min="1"
:max="65535" :max="65535"
@ -175,10 +175,10 @@
placeholder="请输入端口" placeholder="请输入端口"
v-model:value="formData.configuration.rtpPort" v-model:value="formData.configuration.rtpPort"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="4" v-if="checked"> <j-col :span="4" v-if="checked">
<a-form-item <j-form-item
class="form-item" class="form-item"
:name="['configuration', 'dynamicRtpPortRange0']" :name="['configuration', 'dynamicRtpPortRange0']"
:rules="[ :rules="[
@ -189,7 +189,7 @@
]" ]"
> >
<div class="form-label"></div> <div class="form-label"></div>
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
:min="1" :min="1"
:max=" :max="
@ -201,11 +201,11 @@
formData.configuration.dynamicRtpPortRange0 formData.configuration.dynamicRtpPortRange0
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<div class="form-item-checked" v-if="checked">至</div> <div class="form-item-checked" v-if="checked">至</div>
<a-col :span="4" v-if="checked"> <j-col :span="4" v-if="checked">
<a-form-item <j-form-item
class="form-item" class="form-item"
:name="['configuration', 'dynamicRtpPortRange1']" :name="['configuration', 'dynamicRtpPortRange1']"
:rules="[ :rules="[
@ -216,7 +216,7 @@
]" ]"
> >
<div class="form-label"></div> <div class="form-label"></div>
<a-input-number <j-input-number
style="width: 100%" style="width: 100%"
:min=" :min="
formData.configuration.dynamicRtpPortRange0 formData.configuration.dynamicRtpPortRange0
@ -228,40 +228,40 @@
formData.configuration.dynamicRtpPortRange1 formData.configuration.dynamicRtpPortRange1
" "
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="4"> <j-col :span="4">
<a-form-item <j-form-item
class="form-item-checked2" class="form-item-checked2"
:name="['configuration', 'dynamicRtpPort']" :name="['configuration', 'dynamicRtpPort']"
> >
<div class="form-label"></div> <div class="form-label"></div>
<a-checkbox <j-checkbox
v-model:checked=" v-model:checked="
formData.configuration.dynamicRtpPort formData.configuration.dynamicRtpPort
" "
> >
动态端口 动态端口
</a-checkbox> </j-checkbox>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="24"> <j-col :span="24">
<a-form-item> <j-form-item>
<a-button <j-button
v-if="view === 'false'" v-if="view === 'false'"
class="form-submit" class="form-submit"
html-type="submit" html-type="submit"
type="primary" type="primary"
@click.prevent="onSubmit" @click.prevent="onSubmit"
:loading="loading" :loading="loading"
>保存</a-button >保存</j-button
> >
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</a-form> </j-form>
</a-card> </j-card>
</page-container> </page-container>
</template> </template>
@ -283,7 +283,7 @@ const loading = ref(false);
const options = ref([]); const options = ref([]);
const checked = ref(false); const checked = ref(false);
const regDomain = const regDomain =
/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/; /[j-zA-Z0-9][-j-zA-Z0-9]{0,62}(\.[j-zA-Z0-9][-j-zA-Z0-9]{0,62})+\.?/;
const formData = ref<FormDataType>({ const formData = ref<FormDataType>({
name: '', name: '',

32
src/views/media/Stream/index.vue
View File

@ -3,7 +3,7 @@
<div> <div>
<Search :columns="columns" target="search" @search="handleSearch" /> <Search :columns="columns" target="search" @search="handleSearch" />
<JTable <j-pro-table
ref="tableRef" ref="tableRef"
model="CARD" model="CARD"
:columns="columns" :columns="columns"
@ -56,8 +56,8 @@
> >
{{ slotProps.name }} {{ slotProps.name }}
</h3> </h3>
<a-row class="card-item-content-box"> <j-row class="card-item-content-box">
<a-col <j-col
:span="8" :span="8"
class="card-item-content-text" class="card-item-content-text"
> >
@ -65,20 +65,20 @@
服务商 服务商
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
slotProps.provider slotProps.provider
}}</template> }}</template>
{{ slotProps.provider }} {{ slotProps.provider }}
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
<a-col :span="8"> <j-col :span="8">
<div class="card-item-content-text"> <div class="card-item-content-text">
RTP IP RTP IP
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
slotProps.configuration slotProps.configuration
?.rtpIp ?.rtpIp
@ -87,15 +87,15 @@
slotProps.configuration slotProps.configuration
?.rtpIp ?.rtpIp
}} }}
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
<a-col :span="8"> <j-col :span="8">
<div class="card-item-content-text"> <div class="card-item-content-text">
API HOST API HOST
</div> </div>
<div class="card-item-content-text"> <div class="card-item-content-text">
<a-tooltip> <j-tooltip>
<template #title>{{ <template #title>{{
slotProps.configuration slotProps.configuration
?.apiHost ?.apiHost
@ -104,10 +104,10 @@
slotProps.configuration slotProps.configuration
?.apiHost ?.apiHost
}} }}
</a-tooltip> </j-tooltip>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
</template> </template>
<template #actions="item"> <template #actions="item">
@ -132,7 +132,7 @@
</template> </template>
</CardBox> </CardBox>
</template> </template>
</JTable> </j-pro-table>
</div> </div>
</page-container> </page-container>
</template> </template>