update: 视频设备组件替换
This commit is contained in:
JiangQiming
parent
dfdfbb30bd
commit
749127730e
|
|
@ -1,6 +1,6 @@
|
||||||
<!-- 视频设备 - 播放 -->
|
<!-- 视频设备 - 播放 -->
|
||||||
<template>
|
<template>
|
||||||
<a-modal
|
<j-modal
|
||||||
v-model:visible="_vis"
|
v-model:visible="_vis"
|
||||||
title="播放"
|
title="播放"
|
||||||
cancelText="取消"
|
cancelText="取消"
|
||||||
|
|
@ -33,17 +33,17 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="media-live-tool">
|
<div class="media-live-tool">
|
||||||
<a-radio-group
|
<j-radio-group
|
||||||
v-model:value="mediaType"
|
v-model:value="mediaType"
|
||||||
button-style="solid"
|
button-style="solid"
|
||||||
@change="mediaStart"
|
@change="mediaStart"
|
||||||
>
|
>
|
||||||
<a-radio-button value="mp4">MP4</a-radio-button>
|
<j-radio-button value="mp4">MP4</j-radio-button>
|
||||||
<a-radio-button value="flv">FLV</a-radio-button>
|
<j-radio-button value="flv">FLV</j-radio-button>
|
||||||
<a-radio-button value="m3u8">HLS</a-radio-button>
|
<j-radio-button value="m3u8">HLS</j-radio-button>
|
||||||
</a-radio-group>
|
</j-radio-group>
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</j-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<!-- Modal 弹窗，用于新增、修改数据 -->
|
<!-- Modal 弹窗，用于新增、修改数据 -->
|
||||||
<template>
|
<template>
|
||||||
<a-modal
|
<j-modal
|
||||||
v-model:visible="_vis"
|
v-model:visible="_vis"
|
||||||
:title="!!formData.id ? '编辑' : '新增'"
|
:title="!!formData.id ? '编辑' : '新增'"
|
||||||
width="650px"
|
width="650px"
|
||||||
|
|
@ -9,10 +9,10 @@
|
||||||
@ok="handleSubmit"
|
@ok="handleSubmit"
|
||||||
@cancel="handleCancel"
|
@cancel="handleCancel"
|
||||||
>
|
>
|
||||||
<a-form ref="formRef" :model="formData" layout="vertical">
|
<j-form ref="formRef" :model="formData" layout="vertical">
|
||||||
<a-row :gutter="10">
|
<j-row :gutter="10">
|
||||||
<a-col :span="12">
|
<j-col :span="12">
|
||||||
<a-form-item
|
<j-form-item
|
||||||
name="channelId"
|
name="channelId"
|
||||||
:rules="[
|
:rules="[
|
||||||
{
|
{
|
||||||
|
|
@ -26,22 +26,22 @@
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
通道ID
|
通道ID
|
||||||
<a-tooltip title="若不填写，系统将自动生成唯一ID">
|
<j-tooltip title="若不填写，系统将自动生成唯一ID">
|
||||||
<AIcon
|
<AIcon
|
||||||
type="QuestionCircleOutlined"
|
type="QuestionCircleOutlined"
|
||||||
style="margin-left: 2px"
|
style="margin-left: 2px"
|
||||||
/>
|
/>
|
||||||
</a-tooltip>
|
</j-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<a-input
|
<j-input
|
||||||
v-model:value="formData.channelId"
|
v-model:value="formData.channelId"
|
||||||
:disabled="!!formData.id"
|
:disabled="!!formData.id"
|
||||||
placeholder="请输入通道ID"
|
placeholder="请输入通道ID"
|
||||||
/>
|
/>
|
||||||
</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="name"
|
name="name"
|
||||||
label="通道名称"
|
label="通道名称"
|
||||||
:rules="[
|
:rules="[
|
||||||
|
|
@ -49,14 +49,14 @@
|
||||||
{ max: 64, message: '最多可输入64个字符' },
|
{ max: 64, message: '最多可输入64个字符' },
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<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="24">
|
<j-col :span="24">
|
||||||
<a-form-item
|
<j-form-item
|
||||||
name="media_url"
|
name="media_url"
|
||||||
:rules="[
|
:rules="[
|
||||||
{ required: true, message: '请输入视频地址' },
|
{ required: true, message: '请输入视频地址' },
|
||||||
|
|
@ -65,66 +65,66 @@
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
视频地址
|
视频地址
|
||||||
<a-tooltip
|
<j-tooltip
|
||||||
title="不同厂家的RTSP固定地址规则不同，请按对应厂家的规则填写"
|
title="不同厂家的RTSP固定地址规则不同，请按对应厂家的规则填写"
|
||||||
>
|
>
|
||||||
<AIcon
|
<AIcon
|
||||||
type="QuestionCircleOutlined"
|
type="QuestionCircleOutlined"
|
||||||
style="margin-left: 2px"
|
style="margin-left: 2px"
|
||||||
/>
|
/>
|
||||||
</a-tooltip>
|
</j-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<a-input
|
<j-input
|
||||||
v-model:value="formData.media_url"
|
v-model:value="formData.media_url"
|
||||||
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
|
||||||
name="media_username"
|
name="media_username"
|
||||||
label="用户名"
|
label="用户名"
|
||||||
:rules="{ max: 64, message: '最多可输入64个字符' }"
|
:rules="{ max: 64, message: '最多可输入64个字符' }"
|
||||||
>
|
>
|
||||||
<a-input
|
<j-input
|
||||||
v-model:value="formData.media_username"
|
v-model:value="formData.media_username"
|
||||||
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
|
||||||
name="media_password"
|
name="media_password"
|
||||||
label="密码"
|
label="密码"
|
||||||
:rules="{ max: 64, message: '最多可输入64个字符' }"
|
:rules="{ max: 64, message: '最多可输入64个字符' }"
|
||||||
>
|
>
|
||||||
<a-input-password
|
<j-input-password
|
||||||
v-model:value="formData.media_password"
|
v-model:value="formData.media_password"
|
||||||
placeholder="请输入密码"
|
placeholder="请输入密码"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
</a-col>
|
</j-col>
|
||||||
<a-col :span="24">
|
<j-col :span="24">
|
||||||
<a-form-item name="address" label="安装地址">
|
<j-form-item name="address" label="安装地址">
|
||||||
<a-input
|
<j-input
|
||||||
v-model:value="formData.address"
|
v-model:value="formData.address"
|
||||||
placeholder="请输入安装地址"
|
placeholder="请输入安装地址"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
</a-col>
|
</j-col>
|
||||||
<a-col :span="24">
|
<j-col :span="24">
|
||||||
<a-form-item name="description" label="说明">
|
<j-form-item name="description" label="说明">
|
||||||
<a-textarea
|
<j-textarea
|
||||||
v-model:value="formData.description"
|
v-model:value="formData.description"
|
||||||
:rows="4"
|
:rows="4"
|
||||||
:maxlength="200"
|
:maxlength="200"
|
||||||
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 setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -19,62 +19,62 @@
|
||||||
model="table"
|
model="table"
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-tooltip
|
<j-tooltip
|
||||||
v-if="route?.query.type === 'gb28181-2016'"
|
v-if="route?.query.type === 'gb28181-2016'"
|
||||||
title="接入方式为GB/T28281时，不支持新增"
|
title="接入方式为GB/T28281时，不支持新增"
|
||||||
>
|
>
|
||||||
<a-button type="primary" disabled> 新增 </a-button>
|
<j-button type="primary" disabled> 新增 </j-button>
|
||||||
</a-tooltip>
|
</j-tooltip>
|
||||||
<a-button type="primary" @click="handleAdd" v-else>
|
<j-button type="primary" @click="handleAdd" v-else>
|
||||||
新增
|
新增
|
||||||
</a-button>
|
</j-button>
|
||||||
</template>
|
</template>
|
||||||
<template #status="slotProps">
|
<template #status="slotProps">
|
||||||
<a-space>
|
<j-space>
|
||||||
<a-badge
|
<j-badge
|
||||||
:status="
|
:status="
|
||||||
slotProps.status.value === 'online'
|
slotProps.status.value === 'online'
|
||||||
? 'success'
|
? 'success'
|
||||||
: 'error'
|
: 'error'
|
||||||
"
|
"
|
||||||
:text="slotProps.status.text"
|
:text="slotProps.status.text"
|
||||||
></a-badge>
|
></j-badge>
|
||||||
</a-space>
|
</j-space>
|
||||||
</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, 'table')"
|
v-for="i in getActions(slotProps, 'table')"
|
||||||
:key="i.key"
|
:key="i.key"
|
||||||
v-bind="i.tooltip"
|
v-bind="i.tooltip"
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<j-popconfirm
|
||||||
v-if="i.popConfirm"
|
v-if="i.popConfirm"
|
||||||
v-bind="i.popConfirm"
|
v-bind="i.popConfirm"
|
||||||
:disabled="i.disabled"
|
:disabled="i.disabled"
|
||||||
>
|
>
|
||||||
<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>
|
||||||
</JProTable>
|
</JProTable>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -53,14 +53,14 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="playback-right">
|
<div class="playback-right">
|
||||||
<a-spin :spinning="loading">
|
<j-spin :spinning="loading">
|
||||||
<a-tooltip placement="topLeft">
|
<j-tooltip placement="topLeft">
|
||||||
<template #title>
|
<template #title>
|
||||||
<div>云端：存储在服务器中</div>
|
<div>云端：存储在服务器中</div>
|
||||||
<div>本地：存储在设备本地</div>
|
<div>本地：存储在设备本地</div>
|
||||||
</template>
|
</template>
|
||||||
<div>类型: <AIcon type="QuestionCircleOutlined" /></div>
|
<div>类型: <AIcon type="QuestionCircleOutlined" /></div>
|
||||||
</a-tooltip>
|
</j-tooltip>
|
||||||
<RadioCard
|
<RadioCard
|
||||||
layout="horizontal"
|
layout="horizontal"
|
||||||
:options="[
|
:options="[
|
||||||
|
|
@ -80,11 +80,11 @@
|
||||||
v-model="type"
|
v-model="type"
|
||||||
/>
|
/>
|
||||||
<div class="playback-calendar">
|
<div class="playback-calendar">
|
||||||
<a-calendar
|
<j-calendar
|
||||||
v-model:value="time"
|
v-model:value="time"
|
||||||
:fullscreen="false"
|
:fullscreen="false"
|
||||||
:disabledDate="
|
:disabledDate="
|
||||||
(currentDate) => currentDate > dayjs(new Date())
|
(currentDate: Dayjs) => currentDate > dayjs(new Date())
|
||||||
"
|
"
|
||||||
@change="handlePanelChange"
|
@change="handlePanelChange"
|
||||||
/>
|
/>
|
||||||
|
|
@ -93,20 +93,20 @@
|
||||||
class="playback-list"
|
class="playback-list"
|
||||||
:class="{ 'no-list': !historyList.length }"
|
:class="{ 'no-list': !historyList.length }"
|
||||||
>
|
>
|
||||||
<a-empty
|
<j-empty
|
||||||
v-if="!historyList.length"
|
v-if="!historyList.length"
|
||||||
description="暂无数据"
|
description="暂无数据"
|
||||||
/>
|
/>
|
||||||
<a-list
|
<j-list
|
||||||
v-else
|
v-else
|
||||||
class="playback-list-items"
|
class="playback-list-items"
|
||||||
itemLayout="horizontal"
|
itemLayout="horizontal"
|
||||||
:dataSource="historyList"
|
:dataSource="historyList"
|
||||||
>
|
>
|
||||||
<template #renderItem="{ item }">
|
<template #renderItem="{ item }">
|
||||||
<a-list-item>
|
<j-list-item>
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<a-tooltip
|
<j-tooltip
|
||||||
key="play-btn"
|
key="play-btn"
|
||||||
:title="
|
:title="
|
||||||
(item.startTime ||
|
(item.startTime ||
|
||||||
|
|
@ -136,8 +136,8 @@
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</a-tooltip>
|
</j-tooltip>
|
||||||
<a-tooltip
|
<j-tooltip
|
||||||
key="download"
|
key="download"
|
||||||
:title="
|
:title="
|
||||||
type !== 'local'
|
type !== 'local'
|
||||||
|
|
@ -155,7 +155,7 @@
|
||||||
() => downloadClick(item)
|
() => downloadClick(item)
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</a-tooltip>
|
</j-tooltip>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -173,12 +173,12 @@
|
||||||
).format('HH:mm:ss')
|
).format('HH:mm:ss')
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
</a-list-item>
|
</j-list-item>
|
||||||
</template>
|
</template>
|
||||||
<div></div>
|
<div></div>
|
||||||
</a-list>
|
</j-list>
|
||||||
</div>
|
</div>
|
||||||
</a-spin>
|
</j-spin>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</page-container>
|
</page-container>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<a-modal
|
<j-modal
|
||||||
v-model:visible="_vis"
|
v-model:visible="_vis"
|
||||||
title="快速添加"
|
title="快速添加"
|
||||||
cancelText="取消"
|
cancelText="取消"
|
||||||
|
|
@ -9,38 +9,38 @@
|
||||||
:confirmLoading="btnLoading"
|
:confirmLoading="btnLoading"
|
||||||
width="660px"
|
width="660px"
|
||||||
>
|
>
|
||||||
<a-form layout="vertical">
|
<j-form layout="vertical">
|
||||||
<a-form-item label="产品名称" v-bind="validateInfos.name">
|
<j-form-item label="产品名称" v-bind="validateInfos.name">
|
||||||
<a-input
|
<j-input
|
||||||
v-model:value="formData.name"
|
v-model:value="formData.name"
|
||||||
placeholder="请输入名称"
|
placeholder="请输入名称"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
<template v-if="channel === 'gb28181-2016' && formData.accessId">
|
<template v-if="channel === 'gb28181-2016' && formData.accessId">
|
||||||
<a-form-item
|
<j-form-item
|
||||||
label="接入密码"
|
label="接入密码"
|
||||||
v-bind="validateInfos['configuration.access_pwd']"
|
v-bind="validateInfos['configuration.access_pwd']"
|
||||||
>
|
>
|
||||||
<a-input-password
|
<j-input-password
|
||||||
v-model:value="formData.configuration.access_pwd"
|
v-model:value="formData.configuration.access_pwd"
|
||||||
placeholder="请输入接入密码"
|
placeholder="请输入接入密码"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
<a-form-item label="流传输模式">
|
<j-form-item label="流传输模式">
|
||||||
<a-select
|
<j-select
|
||||||
v-model:value="formData.configuration.stream_mode"
|
v-model:value="formData.configuration.stream_mode"
|
||||||
placeholder="请选择流传输模式"
|
placeholder="请选择流传输模式"
|
||||||
:options="streamMode"
|
:options="streamMode"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
</template>
|
</template>
|
||||||
<a-form-item label="接入网关" v-bind="validateInfos.accessId">
|
<j-form-item label="接入网关" v-bind="validateInfos.accessId">
|
||||||
<div class="gateway-box">
|
<div class="gateway-box">
|
||||||
<div v-if="!gatewayList.length">
|
<div v-if="!gatewayList.length">
|
||||||
暂无数据，请先
|
暂无数据，请先
|
||||||
<a-button type="link">
|
<j-button type="link">
|
||||||
添加{{ providerType[props.channel] }} 接入网关
|
添加{{ providerType[props.channel] }} 接入网关
|
||||||
</a-button>
|
</j-button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="gateway-item"
|
class="gateway-item"
|
||||||
|
|
@ -71,20 +71,20 @@
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="desc">{{ item.description }}</div>
|
<div class="desc">{{ item.description }}</div>
|
||||||
<a-row v-if="props.channel === 'gb28181-2016'">
|
<j-row v-if="props.channel === 'gb28181-2016'">
|
||||||
<a-col :span="12">
|
<j-col :span="12">
|
||||||
{{ item.channelInfo?.name }}
|
{{ item.channelInfo?.name }}
|
||||||
</a-col>
|
</j-col>
|
||||||
<a-col :span="12">
|
<j-col :span="12">
|
||||||
{{ item.protocolDetail.name }}
|
{{ item.protocolDetail.name }}
|
||||||
</a-col>
|
</j-col>
|
||||||
<a-col :span="12">
|
<j-col :span="12">
|
||||||
<p
|
<p
|
||||||
v-for="(i, idx) in item.channelInfo
|
v-for="(i, idx) in item.channelInfo
|
||||||
?.addresses"
|
?.addresses"
|
||||||
:key="`${i.address}_address${idx}`"
|
:key="`${i.address}_address${idx}`"
|
||||||
>
|
>
|
||||||
<a-badge
|
<j-badge
|
||||||
:text="i.address"
|
:text="i.address"
|
||||||
:color="
|
:color="
|
||||||
i.health === -1
|
i.health === -1
|
||||||
|
|
@ -93,10 +93,10 @@
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
</a-col>
|
</j-col>
|
||||||
</a-row>
|
</j-row>
|
||||||
<a-row v-else>
|
<j-row v-else>
|
||||||
<a-col :span="24">
|
<j-col :span="24">
|
||||||
<div class="subtitle">
|
<div class="subtitle">
|
||||||
{{ item.protocolDetail.name }}
|
{{ item.protocolDetail.name }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -105,15 +105,15 @@
|
||||||
item.protocolDetail.description
|
item.protocolDetail.description
|
||||||
}}
|
}}
|
||||||
</p>
|
</p>
|
||||||
</a-col>
|
</j-col>
|
||||||
</a-row>
|
</j-row>
|
||||||
</template>
|
</template>
|
||||||
</CardBox>
|
</CardBox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
</a-form>
|
</j-form>
|
||||||
</a-modal>
|
</j-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<!-- 视频设备新增/编辑 -->
|
<!-- 视频设备新增/编辑 -->
|
||||||
<template>
|
<template>
|
||||||
<page-container>
|
<page-container>
|
||||||
<a-card>
|
<j-card>
|
||||||
<a-row :gutter="24">
|
<j-row :gutter="24">
|
||||||
<a-col :span="12">
|
<j-col :span="12">
|
||||||
<a-form layout="vertical">
|
<j-form layout="vertical">
|
||||||
<a-form-item
|
<j-form-item
|
||||||
label="接入方式"
|
label="接入方式"
|
||||||
v-bind="validateInfos.channel"
|
v-bind="validateInfos.channel"
|
||||||
>
|
>
|
||||||
|
|
@ -16,134 +16,134 @@
|
||||||
:disabled="!!route.query.id"
|
:disabled="!!route.query.id"
|
||||||
v-model="formData.channel"
|
v-model="formData.channel"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
<a-row :gutter="24">
|
<j-row :gutter="24">
|
||||||
<a-col :span="8">
|
<j-col :span="8">
|
||||||
<JUpload
|
<JUpload
|
||||||
v-model:modelValue="formData.photoUrl"
|
v-model:modelValue="formData.photoUrl"
|
||||||
:bgImage="formData.photoUrl"
|
:bgImage="formData.photoUrl"
|
||||||
/>
|
/>
|
||||||
</a-col>
|
</j-col>
|
||||||
<a-col :span="16">
|
<j-col :span="16">
|
||||||
<a-form-item
|
<j-form-item
|
||||||
label="ID"
|
label="ID"
|
||||||
v-bind="validateInfos.id"
|
v-bind="validateInfos.id"
|
||||||
>
|
>
|
||||||
<a-input
|
<j-input
|
||||||
v-model:value="formData.id"
|
v-model:value="formData.id"
|
||||||
placeholder="请输入"
|
placeholder="请输入"
|
||||||
:disabled="!!route.query.id"
|
:disabled="!!route.query.id"
|
||||||
/>
|
/>
|
||||||
</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
|
||||||
v-model:value="formData.name"
|
v-model:value="formData.name"
|
||||||
placeholder="请输入名称"
|
placeholder="请输入名称"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
</a-col>
|
</j-col>
|
||||||
</a-row>
|
</j-row>
|
||||||
<a-form-item
|
<j-form-item
|
||||||
label="所属产品"
|
label="所属产品"
|
||||||
v-bind="validateInfos.productId"
|
v-bind="validateInfos.productId"
|
||||||
>
|
>
|
||||||
<a-row :gutter="[0, 10]">
|
<j-row :gutter="[0, 10]">
|
||||||
<a-col :span="!!route.query.id ? 24 : 22">
|
<j-col :span="!!route.query.id ? 24 : 22">
|
||||||
<a-select
|
<j-select
|
||||||
v-model:value="formData.productId"
|
v-model:value="formData.productId"
|
||||||
placeholder="请选择所属产品"
|
placeholder="请选择所属产品"
|
||||||
:disabled="!!route.query.id"
|
:disabled="!!route.query.id"
|
||||||
>
|
>
|
||||||
<a-select-option
|
<j-select-option
|
||||||
v-for="(item, index) in productList"
|
v-for="(item, index) in productList"
|
||||||
:key="index"
|
:key="index"
|
||||||
:value="item.id"
|
:value="item.id"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</a-select-option>
|
</j-select-option>
|
||||||
</a-select>
|
</j-select>
|
||||||
</a-col>
|
</j-col>
|
||||||
<a-col :span="2" v-if="!route.query.id">
|
<j-col :span="2" v-if="!route.query.id">
|
||||||
<a-button
|
<j-button
|
||||||
type="link"
|
type="link"
|
||||||
@click="saveProductVis = true"
|
@click="saveProductVis = true"
|
||||||
>
|
>
|
||||||
<AIcon type="PlusOutlined" />
|
<AIcon type="PlusOutlined" />
|
||||||
</a-button>
|
</j-button>
|
||||||
</a-col>
|
</j-col>
|
||||||
</a-row>
|
</j-row>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
<a-form-item
|
<j-form-item
|
||||||
label="接入密码"
|
label="接入密码"
|
||||||
v-bind="validateInfos['others.access_pwd']"
|
v-bind="validateInfos['others.access_pwd']"
|
||||||
v-if="formData.channel === 'gb28181-2016'"
|
v-if="formData.channel === 'gb28181-2016'"
|
||||||
>
|
>
|
||||||
<a-input-password
|
<j-input-password
|
||||||
v-model:value="formData.others.access_pwd"
|
v-model:value="formData.others.access_pwd"
|
||||||
placeholder="请输入接入密码"
|
placeholder="请输入接入密码"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
<template v-if="!!route.query.id">
|
<template v-if="!!route.query.id">
|
||||||
<a-form-item
|
<j-form-item
|
||||||
label="流传输模式"
|
label="流传输模式"
|
||||||
v-bind="validateInfos.streamMode"
|
v-bind="validateInfos.streamMode"
|
||||||
>
|
>
|
||||||
<a-radio-group
|
<j-radio-group
|
||||||
button-style="solid"
|
button-style="solid"
|
||||||
v-model:value="formData.streamMode"
|
v-model:value="formData.streamMode"
|
||||||
>
|
>
|
||||||
<a-radio-button value="UDP">
|
<j-radio-button value="UDP">
|
||||||
UDP
|
UDP
|
||||||
</a-radio-button>
|
</j-radio-button>
|
||||||
<a-radio-button value="TCP_PASSIVE">
|
<j-radio-button value="TCP_PASSIVE">
|
||||||
TCP被动
|
TCP被动
|
||||||
</a-radio-button>
|
</j-radio-button>
|
||||||
</a-radio-group>
|
</j-radio-group>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
<a-form-item label="设备厂商">
|
<j-form-item label="设备厂商">
|
||||||
<a-input
|
<j-input
|
||||||
v-model:value="formData.manufacturer"
|
v-model:value="formData.manufacturer"
|
||||||
placeholder="请输入设备厂商"
|
placeholder="请输入设备厂商"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
<a-form-item label="设备型号">
|
<j-form-item label="设备型号">
|
||||||
<a-input
|
<j-input
|
||||||
v-model:value="formData.model"
|
v-model:value="formData.model"
|
||||||
placeholder="请输入设备型号"
|
placeholder="请输入设备型号"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
<a-form-item label="固件版本">
|
<j-form-item label="固件版本">
|
||||||
<a-input
|
<j-input
|
||||||
v-model:value="formData.firmware"
|
v-model:value="formData.firmware"
|
||||||
placeholder="请输入固件版本"
|
placeholder="请输入固件版本"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<a-form-item label="说明">
|
<j-form-item label="说明">
|
||||||
<a-textarea
|
<j-textarea
|
||||||
v-model:value="formData.description"
|
v-model:value="formData.description"
|
||||||
show-count
|
show-count
|
||||||
:maxlength="200"
|
:maxlength="200"
|
||||||
:rows="5"
|
:rows="5"
|
||||||
placeholder="请输入说明"
|
placeholder="请输入说明"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
<a-form-item>
|
<j-form-item>
|
||||||
<a-button
|
<j-button
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="handleSubmit"
|
@click="handleSubmit"
|
||||||
:loading="btnLoading"
|
:loading="btnLoading"
|
||||||
>
|
>
|
||||||
保存
|
保存
|
||||||
</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 v-if="1" class="doc" style="height: 800">
|
<div v-if="1" class="doc" style="height: 800">
|
||||||
<h1>1.概述</h1>
|
<h1>1.概述</h1>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -166,7 +166,7 @@
|
||||||
各个厂家、不同设备型号的设备端配置页面布局存在差异，但配置项基本大同小异，此处以大华摄像头为例作为接入配置示例
|
各个厂家、不同设备型号的设备端配置页面布局存在差异，但配置项基本大同小异，此处以大华摄像头为例作为接入配置示例
|
||||||
</div>
|
</div>
|
||||||
<div class="image">
|
<div class="image">
|
||||||
<a-image
|
<j-image
|
||||||
width="100%"
|
width="100%"
|
||||||
:src="getImage('/media/doc1.png')"
|
:src="getImage('/media/doc1.png')"
|
||||||
/>
|
/>
|
||||||
|
|
@ -177,7 +177,7 @@
|
||||||
SIP域通常为SIP服务器编号的前10位。
|
SIP域通常为SIP服务器编号的前10位。
|
||||||
</div>
|
</div>
|
||||||
<div class="image">
|
<div class="image">
|
||||||
<a-image
|
<j-image
|
||||||
width="100%"
|
width="100%"
|
||||||
:src="getImage('/media/doc2.png')"
|
:src="getImage('/media/doc2.png')"
|
||||||
/>
|
/>
|
||||||
|
|
@ -187,7 +187,7 @@
|
||||||
SIP服务器IP/端口填入该设备所属产品-接入方式页面中“连接信息”的IP/端口。
|
SIP服务器IP/端口填入该设备所属产品-接入方式页面中“连接信息”的IP/端口。
|
||||||
</div>
|
</div>
|
||||||
<div class="image">
|
<div class="image">
|
||||||
<a-image
|
<j-image
|
||||||
width="100%"
|
width="100%"
|
||||||
:src="getImage('/media/doc3.png')"
|
:src="getImage('/media/doc3.png')"
|
||||||
/>
|
/>
|
||||||
|
|
@ -201,7 +201,7 @@
|
||||||
填入该设备所属产品-接入方式页面中“GB28281配置”处的接入密码
|
填入该设备所属产品-接入方式页面中“GB28281配置”处的接入密码
|
||||||
</div>
|
</div>
|
||||||
<div class="image">
|
<div class="image">
|
||||||
<a-image
|
<j-image
|
||||||
width="100%"
|
width="100%"
|
||||||
:src="getImage('/media/doc4.png')"
|
:src="getImage('/media/doc4.png')"
|
||||||
/>
|
/>
|
||||||
|
|
@ -230,9 +230,9 @@
|
||||||
只能选择接入方式为固定地址的产品，若当前无对应产品，可点击右侧快速添加按钮，填写产品名称和选择固定地址类型的网关完成产品创建。
|
只能选择接入方式为固定地址的产品，若当前无对应产品，可点击右侧快速添加按钮，填写产品名称和选择固定地址类型的网关完成产品创建。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</j-col>
|
||||||
</a-row>
|
</j-row>
|
||||||
</a-card>
|
</j-card>
|
||||||
|
|
||||||
<SaveProduct
|
<SaveProduct
|
||||||
v-model:visible="saveProductVis"
|
v-model:visible="saveProductVis"
|
||||||
|
|
@ -285,7 +285,7 @@ const formRules = ref({
|
||||||
},
|
},
|
||||||
{ max: 64, message: '最多输入64个字符' },
|
{ max: 64, message: '最多输入64个字符' },
|
||||||
{
|
{
|
||||||
pattern: /^[a-zA-Z0-9_\-]+$/,
|
pattern: /^[j-zA-Z0-9_\-]+$/,
|
||||||
message: '请输入英文或者数字或者-或者_',
|
message: '请输入英文或者数字或者-或者_',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -44,30 +44,30 @@
|
||||||
<h3 class="card-item-content-title">
|
<h3 class="card-item-content-title">
|
||||||
{{ slotProps.name }}
|
{{ slotProps.name }}
|
||||||
</h3>
|
</h3>
|
||||||
<a-row>
|
<j-row>
|
||||||
<a-col :span="12">
|
<j-col :span="12">
|
||||||
<div class="card-item-content-text">厂商</div>
|
<div class="card-item-content-text">厂商</div>
|
||||||
<div>{{ slotProps.manufacturer }}</div>
|
<div>{{ slotProps.manufacturer }}</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>{{ slotProps.channelNumber }}</div>
|
<div>{{ slotProps.channelNumber }}</div>
|
||||||
</a-col>
|
</j-col>
|
||||||
<a-col :span="12">
|
<j-col :span="12">
|
||||||
<div class="card-item-content-text">型号</div>
|
<div class="card-item-content-text">型号</div>
|
||||||
<div>{{ slotProps.model }}</div>
|
<div>{{ slotProps.model }}</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>
|
<div>
|
||||||
{{ providerType[slotProps.provider] }}
|
{{ providerType[slotProps.provider] }}
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</j-col>
|
||||||
</a-row>
|
</j-row>
|
||||||
</template>
|
</template>
|
||||||
<template #actions="item">
|
<template #actions="item">
|
||||||
<PermissionButton
|
<PermissionButton
|
||||||
|
|
@ -92,7 +92,7 @@
|
||||||
</CardBox>
|
</CardBox>
|
||||||
</template>
|
</template>
|
||||||
<template #action="slotProps">
|
<template #action="slotProps">
|
||||||
<a-space :size="16">
|
<j-space :size="16">
|
||||||
<template
|
<template
|
||||||
v-for="i in getActions(slotProps, 'table')"
|
v-for="i in getActions(slotProps, 'table')"
|
||||||
:key="i.key"
|
:key="i.key"
|
||||||
|
|
@ -111,7 +111,7 @@
|
||||||
<template #icon><AIcon :type="i.icon" /></template>
|
<template #icon><AIcon :type="i.icon" /></template>
|
||||||
</PermissionButton>
|
</PermissionButton>
|
||||||
</template>
|
</template>
|
||||||
</a-space>
|
</j-space>
|
||||||
</template>
|
</template>
|
||||||
</JProTable>
|
</JProTable>
|
||||||
</page-container>
|
</page-container>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue