update: 运维管理、数据采集添加FullPage组件
This commit is contained in:
jackhoo_98
parent
7f4d01f2c0
commit
f5afc16a1f
|
|
@ -6,120 +6,128 @@
|
|||
target="search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
model="CARD"
|
||||
:gridColumn="3"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="DataCollect/Channel:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增通道
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:status="getState(slotProps).value"
|
||||
:statusText="getState(slotProps).text"
|
||||
:statusNames="StatusColorEnum"
|
||||
@click="handlEye(slotProps.id)"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/network.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 22px;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
协议
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.provider
|
||||
}}</template>
|
||||
{{ slotProps.provider }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
地址
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.configuration
|
||||
.host ||
|
||||
slotProps.configuration
|
||||
.endpoint
|
||||
}}</template>
|
||||
<span class="details-text">{{
|
||||
slotProps.configuration
|
||||
.host ||
|
||||
slotProps.configuration
|
||||
.endpoint
|
||||
}}</span>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
'DataCollect/Channel:' + item.key
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
model="CARD"
|
||||
:gridColumn="3"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="DataCollect/Channel:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增通道
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:status="getState(slotProps).value"
|
||||
:statusText="getState(slotProps).text"
|
||||
:statusNames="StatusColorEnum"
|
||||
@click="handlEye(slotProps.id)"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/network.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 22px;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
协议
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.provider
|
||||
}}</template>
|
||||
{{ slotProps.provider }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
地址
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.configuration
|
||||
.host ||
|
||||
slotProps.configuration
|
||||
.endpoint
|
||||
}}</template>
|
||||
<span
|
||||
class="details-text"
|
||||
>{{
|
||||
slotProps
|
||||
.configuration
|
||||
.host ||
|
||||
slotProps
|
||||
.configuration
|
||||
.endpoint
|
||||
}}</span
|
||||
>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
'DataCollect/Channel:' + item.key
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
<Save v-if="visible" :data="current" @change="saveChange" />
|
||||
</div>
|
||||
</page-container>
|
||||
|
|
|
|||
|
|
@ -1,274 +1,300 @@
|
|||
<template>
|
||||
<j-spin :spinning="spinning">
|
||||
<pro-search :columns="columns" target="search" @search="handleSearch" />
|
||||
<j-scrollbar height="680">
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="CARD"
|
||||
:columns="columns"
|
||||
:gridColumn="2"
|
||||
:gridColumns="[1, 2]"
|
||||
:request="queryPoint"
|
||||
:defaultParams="defaultParams"
|
||||
:params="params"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
@cancelSelect="cancelSelect"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
v-if="data?.provider == 'MODBUS_TCP'"
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="DataCollect/Collector:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增点位
|
||||
</PermissionButton>
|
||||
<FullPage>
|
||||
<j-scrollbar height="680">
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="CARD"
|
||||
:columns="columns"
|
||||
:gridColumn="2"
|
||||
:gridColumns="[1, 2]"
|
||||
:request="queryPoint"
|
||||
:defaultParams="defaultParams"
|
||||
:params="params"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
@cancelSelect="cancelSelect"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
v-if="data?.provider == 'MODBUS_TCP'"
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="DataCollect/Collector:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增点位
|
||||
</PermissionButton>
|
||||
|
||||
<PermissionButton
|
||||
<PermissionButton
|
||||
v-if="data?.provider === 'OPC_UA'"
|
||||
type="primary"
|
||||
@click="handlScan"
|
||||
hasPermission="DataCollect/Collector:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
扫描
|
||||
</PermissionButton>
|
||||
<j-dropdown
|
||||
v-if="data?.provider === 'OPC_UA'"
|
||||
:trigger="['click']"
|
||||
>
|
||||
<j-button @click.prevent="clickBatch"
|
||||
>批量操作 <AIcon type="DownOutlined"
|
||||
/></j-button>
|
||||
<template #overlay>
|
||||
<j-menu v-if="showBatch">
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
hasPermission="DataCollect/Collector:update"
|
||||
@click="handlBatchUpdate()"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="FormOutlined"
|
||||
/></template>
|
||||
编辑
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
hasPermission="DataCollect/Collector:delete"
|
||||
:popConfirm="{
|
||||
title: `确定删除？`,
|
||||
onConfirm: () =>
|
||||
handlBatchDelete(),
|
||||
}"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="EditOutlined"
|
||||
/></template>
|
||||
删除
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
</j-space>
|
||||
<div
|
||||
v-if="data?.provider === 'OPC_UA'"
|
||||
type="primary"
|
||||
@click="handlScan"
|
||||
hasPermission="DataCollect/Collector:add"
|
||||
style="margin-top: 15px"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
扫描
|
||||
</PermissionButton>
|
||||
<j-dropdown
|
||||
v-if="data?.provider === 'OPC_UA'"
|
||||
:trigger="['click']"
|
||||
<j-checkbox
|
||||
v-model:checked="checkAll"
|
||||
@change="onCheckAllChange"
|
||||
>全选</j-checkbox
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<PointCardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
@click="handleClick"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
class="card-box"
|
||||
:status="slotProps?.runningState?.value"
|
||||
:statusText="slotProps?.runningState?.text"
|
||||
:statusNames="
|
||||
Object.fromEntries(colorMap.entries())
|
||||
"
|
||||
>
|
||||
<j-button @click.prevent="clickBatch"
|
||||
>批量操作 <AIcon type="DownOutlined"
|
||||
/></j-button>
|
||||
<template #overlay>
|
||||
<j-menu v-if="showBatch">
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
hasPermission="DataCollect/Collector:update"
|
||||
@click="handlBatchUpdate()"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="FormOutlined"
|
||||
/></template>
|
||||
编辑
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
hasPermission="DataCollect/Collector:delete"
|
||||
:popConfirm="{
|
||||
title: `确定删除？`,
|
||||
onConfirm: () =>
|
||||
handlBatchDelete(),
|
||||
}"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="EditOutlined"
|
||||
/></template>
|
||||
删除
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
<template #title>
|
||||
<slot name="title">
|
||||
<Ellipsis style="width: calc(100% - 10px)">
|
||||
<div class="card-box-title">
|
||||
{{ slotProps.name }}
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</slot>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
</j-space>
|
||||
<div
|
||||
v-if="data?.provider === 'OPC_UA'"
|
||||
style="margin-top: 15px"
|
||||
>
|
||||
<j-checkbox
|
||||
v-model:checked="checkAll"
|
||||
@change="onCheckAllChange"
|
||||
>全选</j-checkbox
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<PointCardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
@click="handleClick"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
class="card-box"
|
||||
:status="slotProps?.runningState?.value"
|
||||
:statusText="slotProps?.runningState?.text"
|
||||
:statusNames="Object.fromEntries(colorMap.entries())"
|
||||
>
|
||||
<template #title>
|
||||
<slot name="title">
|
||||
<Ellipsis style="width: calc(100% - 10px)">
|
||||
<div class="card-box-title">
|
||||
{{ slotProps.name }}
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</slot>
|
||||
</template>
|
||||
<template #action>
|
||||
<div class="card-box-action">
|
||||
<PermissionButton
|
||||
type="text"
|
||||
:tooltip="{
|
||||
title: '删除',
|
||||
}"
|
||||
hasPermission="DataCollect/Collector:delete"
|
||||
:popConfirm="{
|
||||
title: `确定删除？`,
|
||||
onConfirm: () =>
|
||||
handlDelete(slotProps.id),
|
||||
}"
|
||||
>
|
||||
<a
|
||||
style="
|
||||
font-size: 20px;
|
||||
margin-top: -10px;
|
||||
"
|
||||
><AIcon type="DeleteOutlined"
|
||||
/></a>
|
||||
</PermissionButton>
|
||||
<template #action>
|
||||
<div class="card-box-action">
|
||||
<PermissionButton
|
||||
type="text"
|
||||
:tooltip="{
|
||||
title: '删除',
|
||||
}"
|
||||
hasPermission="DataCollect/Collector:delete"
|
||||
:popConfirm="{
|
||||
title: `确定删除？`,
|
||||
onConfirm: () =>
|
||||
handlDelete(slotProps.id),
|
||||
}"
|
||||
>
|
||||
<a
|
||||
style="
|
||||
font-size: 20px;
|
||||
margin-top: -10px;
|
||||
"
|
||||
><AIcon type="DeleteOutlined"
|
||||
/></a>
|
||||
</PermissionButton>
|
||||
|
||||
<PermissionButton
|
||||
class="add-btn"
|
||||
type="text"
|
||||
@click="handlEdit(slotProps)"
|
||||
hasPermission="DataCollect/Collector:update"
|
||||
>
|
||||
<a style="font-size: 20px"
|
||||
><AIcon type="FormOutlined"
|
||||
/></a>
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</template>
|
||||
<template #img>
|
||||
<img
|
||||
:src="
|
||||
slotProps.provider === 'OPC_UA'
|
||||
? opcImage
|
||||
: modbusImage
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-box-content">
|
||||
<div class="card-box-content-left">
|
||||
<div class="card-box-content-left-1">
|
||||
<PermissionButton
|
||||
class="add-btn"
|
||||
type="text"
|
||||
@click="handlEdit(slotProps)"
|
||||
hasPermission="DataCollect/Collector:update"
|
||||
>
|
||||
<a style="font-size: 20px"
|
||||
><AIcon type="FormOutlined"
|
||||
/></a>
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</template>
|
||||
<template #img>
|
||||
<img
|
||||
:src="
|
||||
slotProps.provider === 'OPC_UA'
|
||||
? opcImage
|
||||
: modbusImage
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-box-content">
|
||||
<div class="card-box-content-left">
|
||||
<div class="card-box-content-left-1">
|
||||
<div
|
||||
class="ard-box-content-left-1-title"
|
||||
v-if="
|
||||
propertyValue.has(
|
||||
slotProps.id,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-ellipsis
|
||||
style="max-width: 150px"
|
||||
>
|
||||
{{
|
||||
getParseData(slotProps)
|
||||
}}
|
||||
</j-ellipsis>
|
||||
</div>
|
||||
<div
|
||||
class="ard-box-content-left-1-title"
|
||||
v-else
|
||||
>
|
||||
<j-ellipsis
|
||||
style="max-width: 150px"
|
||||
>
|
||||
{{
|
||||
getReadParseData(
|
||||
slotProps,
|
||||
)
|
||||
}}
|
||||
</j-ellipsis>
|
||||
</div>
|
||||
<a
|
||||
v-if="
|
||||
getAccessModes(
|
||||
slotProps,
|
||||
).includes('write')
|
||||
"
|
||||
@click.stop="
|
||||
clickEdit(slotProps)
|
||||
"
|
||||
><AIcon type="EditOutlined"
|
||||
/></a>
|
||||
<a
|
||||
v-if="
|
||||
getAccessModes(
|
||||
slotProps,
|
||||
).includes('read')
|
||||
"
|
||||
@click.stop="
|
||||
clickRead(slotProps)
|
||||
"
|
||||
><AIcon type="RedoOutlined"
|
||||
/></a>
|
||||
</div>
|
||||
<div
|
||||
class="ard-box-content-left-1-title"
|
||||
v-if="
|
||||
propertyValue.has(slotProps.id)
|
||||
"
|
||||
class="card-box-content-right-2"
|
||||
>
|
||||
<j-ellipsis
|
||||
style="max-width: 150px"
|
||||
>
|
||||
{{ getParseData(slotProps) }}
|
||||
</j-ellipsis>
|
||||
</div>
|
||||
<div
|
||||
class="ard-box-content-left-1-title"
|
||||
v-else
|
||||
>
|
||||
<j-ellipsis
|
||||
style="max-width: 150px"
|
||||
>
|
||||
<p>
|
||||
{{
|
||||
getReadParseData(slotProps)
|
||||
}}
|
||||
</j-ellipsis>
|
||||
</div>
|
||||
<a
|
||||
v-if="
|
||||
getAccessModes(
|
||||
slotProps,
|
||||
).includes('write')
|
||||
"
|
||||
@click.stop="clickEdit(slotProps)"
|
||||
><AIcon type="EditOutlined"
|
||||
/></a>
|
||||
<a
|
||||
v-if="
|
||||
getAccessModes(
|
||||
slotProps,
|
||||
).includes('read')
|
||||
"
|
||||
@click.stop="clickRead(slotProps)"
|
||||
><AIcon type="RedoOutlined"
|
||||
/></a>
|
||||
</div>
|
||||
<div
|
||||
v-if="propertyValue.has(slotProps.id)"
|
||||
class="card-box-content-right-2"
|
||||
>
|
||||
<p>
|
||||
{{
|
||||
propertyValue.get(slotProps.id)
|
||||
?.hex || ''
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
{{
|
||||
dayjs(
|
||||
propertyValue.get(
|
||||
slotProps.id,
|
||||
)?.timestamp,
|
||||
).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</p>
|
||||
)?.hex || ''
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
{{
|
||||
dayjs(
|
||||
propertyValue.get(
|
||||
slotProps.id,
|
||||
)?.timestamp,
|
||||
).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-box-content-right">
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="getRight1(slotProps)"
|
||||
class="card-box-content-right-1"
|
||||
>
|
||||
<span>
|
||||
{{ getQuantity(slotProps) }}
|
||||
</span>
|
||||
<span>
|
||||
{{ getAddress(slotProps) }}
|
||||
</span>
|
||||
<span>
|
||||
{{
|
||||
getScaleFactor(
|
||||
slotProps,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</Ellipsis>
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="card-box-content-right-2"
|
||||
>
|
||||
<span>{{
|
||||
getText(slotProps)
|
||||
}}</span>
|
||||
<span>{{
|
||||
getInterval(slotProps)
|
||||
}}</span>
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</PointCardBox>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</j-scrollbar>
|
||||
</FullPage>
|
||||
|
||||
<div class="card-box-content-right">
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="getRight1(slotProps)"
|
||||
class="card-box-content-right-1"
|
||||
>
|
||||
<span>
|
||||
{{ getQuantity(slotProps) }}
|
||||
</span>
|
||||
<span>
|
||||
{{ getAddress(slotProps) }}
|
||||
</span>
|
||||
<span>
|
||||
{{ getScaleFactor(slotProps) }}
|
||||
</span>
|
||||
</div>
|
||||
</Ellipsis>
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<div class="card-box-content-right-2">
|
||||
<span>{{
|
||||
getText(slotProps)
|
||||
}}</span>
|
||||
<span>{{
|
||||
getInterval(slotProps)
|
||||
}}</span>
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</PointCardBox>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</j-scrollbar>
|
||||
<SaveModBus
|
||||
v-if="visible.saveModBus"
|
||||
:data="current"
|
||||
|
|
|
|||
|
|
@ -1,37 +1,46 @@
|
|||
<template>
|
||||
<j-spin :spinning="loading">
|
||||
<div class="dash-board">
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<h3 style="width: 100px">点位数据量</h3>
|
||||
</div>
|
||||
<div class="right">
|
||||
<j-radio-group
|
||||
button-style="solid"
|
||||
style="margin-right: 10px"
|
||||
v-model:value="data.time.type"
|
||||
>
|
||||
<j-radio-button value="hour">
|
||||
最近1小时
|
||||
</j-radio-button>
|
||||
<j-radio-button value="today"> 今日 </j-radio-button>
|
||||
<j-radio-button value="week"> 近一周 </j-radio-button>
|
||||
</j-radio-group>
|
||||
<j-range-picker
|
||||
:allowClear="false"
|
||||
:show-time="{ format: 'HH:mm:ss' }"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
v-model:value="data.time.time"
|
||||
@change="pickerTimeChange"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><AIcon type="CalendarOutlined"
|
||||
/></template>
|
||||
</j-range-picker>
|
||||
<FullPage>
|
||||
<div class="dash-board">
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<h3 style="width: 100px">点位数据量</h3>
|
||||
</div>
|
||||
<div class="right">
|
||||
<j-radio-group
|
||||
button-style="solid"
|
||||
style="margin-right: 10px"
|
||||
v-model:value="data.time.type"
|
||||
>
|
||||
<j-radio-button value="hour">
|
||||
最近1小时
|
||||
</j-radio-button>
|
||||
<j-radio-button value="today">
|
||||
今日
|
||||
</j-radio-button>
|
||||
<j-radio-button value="week">
|
||||
近一周
|
||||
</j-radio-button>
|
||||
</j-radio-group>
|
||||
<j-range-picker
|
||||
:allowClear="false"
|
||||
:show-time="{ format: 'HH:mm:ss' }"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
v-model:value="data.time.time"
|
||||
@change="pickerTimeChange"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><AIcon type="CalendarOutlined"
|
||||
/></template>
|
||||
</j-range-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="chartRef"
|
||||
style="width: 100%; min-height: 350px"
|
||||
></div>
|
||||
</div>
|
||||
<div ref="chartRef" style="width: 100%; height: 350px"></div>
|
||||
</div>
|
||||
</FullPage>
|
||||
</j-spin>
|
||||
</template>
|
||||
|
||||
|
|
@ -99,9 +108,11 @@ const handleOptions = (x = [], y = []) => {
|
|||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
nextTick(() => {
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -132,6 +143,7 @@ watch(
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
// height: 500px;
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,22 @@
|
|||
<template>
|
||||
<page-container :tabList="list" :tabActiveKey="activeKey" @tabChange="onTabChange">
|
||||
<AccessLog v-if="activeKey === '1'" />
|
||||
<SystemLog v-else />
|
||||
<page-container
|
||||
:tabList="list"
|
||||
:tabActiveKey="activeKey"
|
||||
@tabChange="onTabChange"
|
||||
>
|
||||
<FullPage>
|
||||
<AccessLog v-if="activeKey === '1'" />
|
||||
<SystemLog v-else />
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="LogPage">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import AccessLog from './Access/index.vue';
|
||||
import SystemLog from './System/index.vue';
|
||||
import {useRouterParams} from "@/utils/hooks/useParams";
|
||||
import { useRouterParams } from '@/utils/hooks/useParams';
|
||||
|
||||
const routerParams = useRouterParams()
|
||||
const routerParams = useRouterParams();
|
||||
const activeKey = ref('1');
|
||||
|
||||
const list = [
|
||||
|
|
|
|||
|
|
@ -60,61 +60,64 @@
|
|||
target="search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:request="history"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: defaultParams,
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
moment(slotProps.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</span>
|
||||
</template>
|
||||
<template #productId="slotProps">
|
||||
<span>{{ slotProps.productName }}</span>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.state.text"
|
||||
:color="colorMap.get(slotProps.state.value)"
|
||||
/>
|
||||
</template>
|
||||
<template #progress="slotProps">
|
||||
<span>{{ slotProps.progress }}%</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:hasPermission="'device/Firmware:' + i.key"
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:request="history"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: defaultParams,
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
moment(slotProps.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</span>
|
||||
</template>
|
||||
<template #productId="slotProps">
|
||||
<span>{{ slotProps.productName }}</span>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.state.text"
|
||||
:color="colorMap.get(slotProps.state.value)"
|
||||
/>
|
||||
</template>
|
||||
<template #progress="slotProps">
|
||||
<span>{{ slotProps.progress }}%</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:hasPermission="'device/Firmware:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
|
||||
<Save :data="current" v-if="visible" @change="saveChange" />
|
||||
</div>
|
||||
</page-container>
|
||||
|
|
|
|||
|
|
@ -6,62 +6,66 @@
|
|||
target="search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="device/Firmware:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #productId="slotProps">
|
||||
<span>{{ slotProps.productName }}</span>
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
dayjs(slotProps.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="device/Firmware:add"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="'device/Firmware:' + i.key"
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #productId="slotProps">
|
||||
<span>{{ slotProps.productName }}</span>
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
dayjs(slotProps.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="'device/Firmware:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
</div>
|
||||
<Save v-if="visible" :data="current" @change="saveChange" />
|
||||
</page-container>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,46 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<j-spin :spinning="loading">
|
||||
<j-card :bordered="false">
|
||||
<div v-if="type && id === ':id'">
|
||||
<Provider
|
||||
@onClick="goProviders"
|
||||
:dataSource="dataSource"
|
||||
></Provider>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="go-back" v-if="id === ':id'">
|
||||
<a @click="goBack">返回</a>
|
||||
<FullPage>
|
||||
<j-card :bordered="false">
|
||||
<div v-if="type && id === ':id'">
|
||||
<Provider
|
||||
@onClick="goProviders"
|
||||
:dataSource="dataSource"
|
||||
></Provider>
|
||||
</div>
|
||||
<Network
|
||||
v-if="showType === 'network'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Media
|
||||
v-if="showType === 'media'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Channel
|
||||
v-if="showType === 'channel'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Edge
|
||||
v-if="showType === 'edge'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Cloud
|
||||
v-if="showType === 'cloud'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
</div>
|
||||
</j-card>
|
||||
<div v-else>
|
||||
<div class="go-back" v-if="id === ':id'">
|
||||
<a @click="goBack">返回</a>
|
||||
</div>
|
||||
<Network
|
||||
v-if="showType === 'network'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Media
|
||||
v-if="showType === 'media'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Channel
|
||||
v-if="showType === 'channel'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Edge
|
||||
v-if="showType === 'edge'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Cloud
|
||||
v-if="showType === 'cloud'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
</div>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</j-spin>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,173 +6,189 @@
|
|||
target="search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="CARD"
|
||||
:columns="columns"
|
||||
:request="list"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
termType: 'nin',
|
||||
column: 'provider',
|
||||
value: 'plugin_gateway', //todo 暂时不做插件接入
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
gridColumn="2"
|
||||
:gridColumns="[1, 2]"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="link/AccessConfig:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps)"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
@click="handlEye(slotProps.id)"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/device-access.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 20px;
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="CARD"
|
||||
:columns="columns"
|
||||
:request="list"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
termType: 'nin',
|
||||
column: 'provider',
|
||||
value: 'plugin_gateway', //todo 暂时不做插件接入
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
gridColumn="2"
|
||||
:gridColumns="[1, 2]"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="link/AccessConfig:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps)"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
@click="handlEye(slotProps.id)"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="getImage('/device-access.png')"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 20px;
|
||||
"
|
||||
>
|
||||
<span class="card-title">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="slotProps.channelInfo"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
{{ slotProps.channelInfo.name }}
|
||||
</div>
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
"
|
||||
v-if="
|
||||
slotProps.channelInfo
|
||||
.addresses
|
||||
"
|
||||
>
|
||||
<j-badge
|
||||
:status="
|
||||
getStatus(slotProps)
|
||||
"
|
||||
/>
|
||||
<span>
|
||||
{{
|
||||
slotProps.channelInfo
|
||||
.addresses[0]
|
||||
.address
|
||||
}}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="slotProps.protocolDetail"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
协议
|
||||
</div>
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
"
|
||||
>
|
||||
<span>
|
||||
{{
|
||||
slotProps.protocolDetail
|
||||
.name
|
||||
}}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-row>
|
||||
<j-col
|
||||
:span="24"
|
||||
class="card-item-content-description"
|
||||
>
|
||||
<j-tooltip>
|
||||
<template #title>
|
||||
{{
|
||||
getDescription(
|
||||
slotProps,
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
{{ getDescription(slotProps) }}
|
||||
</j-tooltip>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
'link/AccessConfig:' + item.key
|
||||
"
|
||||
>
|
||||
<span class="card-title">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="slotProps.channelInfo"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
{{ slotProps.channelInfo.name }}
|
||||
</div>
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
"
|
||||
v-if="
|
||||
slotProps.channelInfo.addresses
|
||||
"
|
||||
>
|
||||
<j-badge
|
||||
:status="getStatus(slotProps)"
|
||||
/>
|
||||
<span>
|
||||
{{
|
||||
slotProps.channelInfo
|
||||
.addresses[0].address
|
||||
}}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="slotProps.protocolDetail"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
协议
|
||||
</div>
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
"
|
||||
>
|
||||
<span>
|
||||
{{
|
||||
slotProps.protocolDetail
|
||||
.name
|
||||
}}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-row>
|
||||
<j-col
|
||||
:span="24"
|
||||
class="card-item-content-description"
|
||||
>
|
||||
<j-tooltip>
|
||||
<template #title>
|
||||
{{ getDescription(slotProps) }}
|
||||
</template>
|
||||
{{ getDescription(slotProps) }}
|
||||
</j-tooltip>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'link/AccessConfig:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.state.text"
|
||||
:status="statusMap.get(slotProps.state.value)"
|
||||
/>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.state.text"
|
||||
:status="statusMap.get(slotProps.state.value)"
|
||||
/>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,102 +1,106 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<j-card>
|
||||
<j-row :gutter="[24, 24]" style="padding: 24px">
|
||||
<j-col :span="12">
|
||||
<j-form
|
||||
class="form"
|
||||
layout="vertical"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
:label-col="{ span: 8 }"
|
||||
:wrapper-col="{ span: 24 }"
|
||||
autocomplete="off"
|
||||
>
|
||||
<j-form-item
|
||||
label="证书标准"
|
||||
v-bind="validateInfos.type"
|
||||
<FullPage>
|
||||
<j-card>
|
||||
<j-row :gutter="[24, 24]" style="padding: 24px">
|
||||
<j-col :span="12">
|
||||
<j-form
|
||||
class="form"
|
||||
layout="vertical"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
:label-col="{ span: 8 }"
|
||||
:wrapper-col="{ span: 24 }"
|
||||
autocomplete="off"
|
||||
>
|
||||
<j-radio-group v-model:value="formData.type">
|
||||
<j-radio-button
|
||||
class="form-radio-button"
|
||||
value="common"
|
||||
>
|
||||
<img :src="getImage('/certificate.png')" />
|
||||
</j-radio-button>
|
||||
</j-radio-group>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="证书名称"
|
||||
v-bind="validateInfos.name"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入证书名称"
|
||||
v-model:value="formData.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="证书文件"
|
||||
v-bind="validateInfos['configs.cert']"
|
||||
>
|
||||
<CertificateFile
|
||||
name="cert"
|
||||
v-model:modelValue="formData.configs.cert"
|
||||
placeholder="请输入证书文件"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="证书私钥"
|
||||
v-bind="validateInfos['configs.key']"
|
||||
>
|
||||
<CertificateFile
|
||||
name="key"
|
||||
v-model:modelValue="formData.configs.key"
|
||||
placeholder="请输入证书私钥"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item label="说明" name="description">
|
||||
<j-textarea
|
||||
placeholder="请输入说明"
|
||||
v-model:value="formData.description"
|
||||
:maxlength="200"
|
||||
:rows="3"
|
||||
showCount
|
||||
/>
|
||||
</j-form-item>
|
||||
|
||||
<j-form-item>
|
||||
<j-button
|
||||
v-if="view === 'false'"
|
||||
class="form-submit"
|
||||
html-type="submit"
|
||||
type="primary"
|
||||
@click.prevent="onSubmit"
|
||||
:loading="loading"
|
||||
>保存</j-button
|
||||
<j-form-item
|
||||
label="证书标准"
|
||||
v-bind="validateInfos.type"
|
||||
>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="doc">
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
证书由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能，保障设备与平台间的数据传输安全。配置后可被网络组件引用。
|
||||
<j-radio-group v-model:value="formData.type">
|
||||
<j-radio-button
|
||||
class="form-radio-button"
|
||||
value="common"
|
||||
>
|
||||
<img
|
||||
:src="getImage('/certificate.png')"
|
||||
/>
|
||||
</j-radio-button>
|
||||
</j-radio-group>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="证书名称"
|
||||
v-bind="validateInfos.name"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入证书名称"
|
||||
v-model:value="formData.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="证书文件"
|
||||
v-bind="validateInfos['configs.cert']"
|
||||
>
|
||||
<CertificateFile
|
||||
name="cert"
|
||||
v-model:modelValue="formData.configs.cert"
|
||||
placeholder="请输入证书文件"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="证书私钥"
|
||||
v-bind="validateInfos['configs.key']"
|
||||
>
|
||||
<CertificateFile
|
||||
name="key"
|
||||
v-model:modelValue="formData.configs.key"
|
||||
placeholder="请输入证书私钥"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item label="说明" name="description">
|
||||
<j-textarea
|
||||
placeholder="请输入说明"
|
||||
v-model:value="formData.description"
|
||||
:maxlength="200"
|
||||
:rows="3"
|
||||
showCount
|
||||
/>
|
||||
</j-form-item>
|
||||
|
||||
<j-form-item>
|
||||
<j-button
|
||||
v-if="view === 'false'"
|
||||
class="form-submit"
|
||||
html-type="submit"
|
||||
type="primary"
|
||||
@click.prevent="onSubmit"
|
||||
:loading="loading"
|
||||
>保存</j-button
|
||||
>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="doc">
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
证书由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能，保障设备与平台间的数据传输安全。配置后可被网络组件引用。
|
||||
</div>
|
||||
<h1>2. 配置说明</h1>
|
||||
<h2>1、证书文件</h2>
|
||||
<div>
|
||||
您可以使用文本编辑工具打开PEM格式的证书文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传，并选择存储在本地计算机的证书文件，将文件内容上传到文本框。
|
||||
</div>
|
||||
<h2>2、证书私钥</h2>
|
||||
<div>
|
||||
填写证书私钥内容的PEM编码。
|
||||
您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。
|
||||
</div>
|
||||
</div>
|
||||
<h1>2. 配置说明</h1>
|
||||
<h2>1、证书文件</h2>
|
||||
<div>
|
||||
您可以使用文本编辑工具打开PEM格式的证书文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传，并选择存储在本地计算机的证书文件，将文件内容上传到文本框。
|
||||
</div>
|
||||
<h2>2、证书私钥</h2>
|
||||
<div>
|
||||
填写证书私钥内容的PEM编码。
|
||||
您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。
|
||||
</div>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-card>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,55 +6,59 @@
|
|||
target="search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="link/Certificate:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span>{{ slotProps.type.text }}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="link/Certificate:add"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="'link/Certificate:' + i.key"
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span>{{ slotProps.type.text }}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="'link/Certificate:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,136 +6,139 @@
|
|||
target="search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="list"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="link/Protocol:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="false"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/protocol.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<span
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="list"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="link/Protocol:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="false"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/protocol.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<Ellipsis
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col
|
||||
:span="12"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div class="card-item-content-text">
|
||||
ID
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.id
|
||||
}}</template>
|
||||
{{ slotProps.id }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
类型
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.type
|
||||
}}</template>
|
||||
{{ slotProps.type }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'link/Protocol:' + item.key"
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col
|
||||
:span="12"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div class="card-item-content-text">
|
||||
ID
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.id
|
||||
}}</template>
|
||||
{{ slotProps.id }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
类型
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.type
|
||||
}}</template>
|
||||
{{ slotProps.type }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'link/Protocol:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="'link/Protocol:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="'link/Protocol:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
</div>
|
||||
<Save v-if="visible" :data="current" @change="saveChange" />
|
||||
</page-container>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -6,170 +6,173 @@
|
|||
target="search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:gridColumn="3"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="link/Type:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
@click="handlEye(slotProps.id)"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/network.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 20px;
|
||||
"
|
||||
>
|
||||
<span
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:gridColumn="3"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="link/Type:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
@click="handlEye(slotProps.id)"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/network.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<Ellipsis
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 22px;
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 20px;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col :span="8">
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
<span
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 22px;
|
||||
"
|
||||
>
|
||||
类型
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.type
|
||||
}}</template>
|
||||
{{ slotProps.type }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col :span="8">
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
类型
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.type
|
||||
}}</template>
|
||||
{{ slotProps.type }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
|
||||
<j-col :span="16">
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
详情
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
getDetails(slotProps)
|
||||
}}</template>
|
||||
{{ getDetails(slotProps) }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'link/Type:' + item.key"
|
||||
<j-col :span="16">
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
详情
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
getDetails(slotProps)
|
||||
}}</template>
|
||||
{{ getDetails(slotProps) }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'link/Type:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="'link/Type:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:text="slotProps.state.text"
|
||||
:status="slotProps.state.value"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #shareCluster="slotProps">
|
||||
{{
|
||||
slotProps.shareCluster === 'true'
|
||||
? '共享配置'
|
||||
: '独立配置'
|
||||
}}
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
{{ slotProps.typeObject.name }}
|
||||
</template>
|
||||
<template #details="slotProps">
|
||||
{{ getDetails(slotProps) }}
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="'link/Type:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:text="slotProps.state.text"
|
||||
:status="slotProps.state.value"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #shareCluster="slotProps">
|
||||
{{
|
||||
slotProps.shareCluster === 'true'
|
||||
? '共享配置'
|
||||
: '独立配置'
|
||||
}}
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
{{ slotProps.typeObject.name }}
|
||||
</template>
|
||||
<template #details="slotProps">
|
||||
{{ getDetails(slotProps) }}
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,266 +1,284 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<j-card>
|
||||
<j-form
|
||||
ref="formRef"
|
||||
class="form"
|
||||
layout="vertical"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
>
|
||||
<j-row :gutter="[16, 0]">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="流媒体名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入流媒体名称',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="formData.name"
|
||||
placeholder="请输入流媒体名称"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="服务商"
|
||||
name="provider"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择服务商',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-select
|
||||
ref="select"
|
||||
v-model:value="formData.provider"
|
||||
:options="options"
|
||||
placeholder="请选择服务商"
|
||||
></j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="密钥"
|
||||
:name="['configuration', 'secret']"
|
||||
:rules="[
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input-password
|
||||
placeholder="请输入密钥"
|
||||
v-model:value="formData.configuration.secret"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="8" class="form-item">
|
||||
<j-form-item
|
||||
:name="['configuration', 'apiHost']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入API Host',
|
||||
},
|
||||
{
|
||||
validator: validateAddress,
|
||||
message: '请输入正确的IP地址或者域名',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
API Host
|
||||
<j-tooltip
|
||||
title="调用流媒体接口时请求的服务地址"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-input
|
||||
placeholder="请输入API Host"
|
||||
v-model:value="formData.configuration.apiHost"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
class="form-item"
|
||||
:name="['configuration', 'apiPort']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
:precision="0"
|
||||
placeholder="请输入输入端口"
|
||||
v-model:value="formData.configuration.apiPort"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="8" class="form-item">
|
||||
<j-form-item
|
||||
:name="['configuration', 'rtpIp']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入RTP IP',
|
||||
},
|
||||
{
|
||||
validator: validateAddress,
|
||||
message: '请输入正确的IP地址或者域名',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
RTP IP
|
||||
<j-tooltip
|
||||
title="视频设备将流推送到该IP地址下，部分设备仅支持IP地址，建议全是用IP地址"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-input
|
||||
placeholder="请输入RTP IP"
|
||||
v-model:value="formData.configuration.rtpIp"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4" v-if="!checked">
|
||||
<j-form-item
|
||||
class="form-item"
|
||||
:name="['configuration', 'rtpPort']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
:precision="0"
|
||||
placeholder="请输入端口"
|
||||
v-model:value="formData.configuration.rtpPort"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4" v-if="checked">
|
||||
<j-form-item
|
||||
class="form-item"
|
||||
:name="['configuration', 'dynamicRtpPortRange0']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入起始端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
:min="1"
|
||||
:max="
|
||||
formData.configuration
|
||||
.dynamicRtpPortRange1 || 65535
|
||||
"
|
||||
:precision="0"
|
||||
placeholder="起始端口"
|
||||
v-model:value="
|
||||
formData.configuration.dynamicRtpPortRange0
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<div class="form-item-checked" v-if="checked">至</div>
|
||||
<j-col :span="4" v-if="checked">
|
||||
<j-form-item
|
||||
class="form-item"
|
||||
:name="['configuration', 'dynamicRtpPortRange1']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入终止端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
:min="
|
||||
formData.configuration
|
||||
.dynamicRtpPortRange0 || 1
|
||||
"
|
||||
:max="65535"
|
||||
:precision="0"
|
||||
placeholder="终止端口"
|
||||
v-model:value="
|
||||
formData.configuration.dynamicRtpPortRange1
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
class="form-item-checked2"
|
||||
:name="['configuration', 'dynamicRtpPort']"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
<j-checkbox
|
||||
v-model:checked="
|
||||
formData.configuration.dynamicRtpPort
|
||||
"
|
||||
<FullPage>
|
||||
<j-card>
|
||||
<j-form
|
||||
ref="formRef"
|
||||
class="form"
|
||||
layout="vertical"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
>
|
||||
<j-row :gutter="[16, 0]">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="流媒体名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入流媒体名称',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
动态端口
|
||||
</j-checkbox>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
|
||||
<j-col :span="24">
|
||||
<j-form-item>
|
||||
<j-button
|
||||
v-if="view === 'false'"
|
||||
html-type="submit"
|
||||
type="primary"
|
||||
@click.prevent="onSubmit"
|
||||
:loading="loading"
|
||||
>保存</j-button
|
||||
<j-input
|
||||
v-model:value="formData.name"
|
||||
placeholder="请输入流媒体名称"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="服务商"
|
||||
name="provider"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择服务商',
|
||||
},
|
||||
]"
|
||||
>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
</j-card>
|
||||
<j-select
|
||||
ref="select"
|
||||
v-model:value="formData.provider"
|
||||
:options="options"
|
||||
placeholder="请选择服务商"
|
||||
></j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="密钥"
|
||||
:name="['configuration', 'secret']"
|
||||
:rules="[
|
||||
{
|
||||
max: 64,
|
||||
message: '最大可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input-password
|
||||
placeholder="请输入密钥"
|
||||
v-model:value="
|
||||
formData.configuration.secret
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="8" class="form-item">
|
||||
<j-form-item
|
||||
:name="['configuration', 'apiHost']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入API Host',
|
||||
},
|
||||
{
|
||||
validator: validateAddress,
|
||||
message: '请输入正确的IP地址或者域名',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
API Host
|
||||
<j-tooltip
|
||||
title="调用流媒体接口时请求的服务地址"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-input
|
||||
placeholder="请输入API Host"
|
||||
v-model:value="
|
||||
formData.configuration.apiHost
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
class="form-item"
|
||||
:name="['configuration', 'apiPort']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
:precision="0"
|
||||
placeholder="请输入输入端口"
|
||||
v-model:value="
|
||||
formData.configuration.apiPort
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="8" class="form-item">
|
||||
<j-form-item
|
||||
:name="['configuration', 'rtpIp']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入RTP IP',
|
||||
},
|
||||
{
|
||||
validator: validateAddress,
|
||||
message: '请输入正确的IP地址或者域名',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
RTP IP
|
||||
<j-tooltip
|
||||
title="视频设备将流推送到该IP地址下，部分设备仅支持IP地址，建议全是用IP地址"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-input
|
||||
placeholder="请输入RTP IP"
|
||||
v-model:value="formData.configuration.rtpIp"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4" v-if="!checked">
|
||||
<j-form-item
|
||||
class="form-item"
|
||||
:name="['configuration', 'rtpPort']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
:precision="0"
|
||||
placeholder="请输入端口"
|
||||
v-model:value="
|
||||
formData.configuration.rtpPort
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4" v-if="checked">
|
||||
<j-form-item
|
||||
class="form-item"
|
||||
:name="[
|
||||
'configuration',
|
||||
'dynamicRtpPortRange0',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入起始端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
:min="1"
|
||||
:max="
|
||||
formData.configuration
|
||||
.dynamicRtpPortRange1 || 65535
|
||||
"
|
||||
:precision="0"
|
||||
placeholder="起始端口"
|
||||
v-model:value="
|
||||
formData.configuration
|
||||
.dynamicRtpPortRange0
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<div class="form-item-checked" v-if="checked">至</div>
|
||||
<j-col :span="4" v-if="checked">
|
||||
<j-form-item
|
||||
class="form-item"
|
||||
:name="[
|
||||
'configuration',
|
||||
'dynamicRtpPortRange1',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入终止端口',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
<j-input-number
|
||||
style="width: 100%"
|
||||
:min="
|
||||
formData.configuration
|
||||
.dynamicRtpPortRange0 || 1
|
||||
"
|
||||
:max="65535"
|
||||
:precision="0"
|
||||
placeholder="终止端口"
|
||||
v-model:value="
|
||||
formData.configuration
|
||||
.dynamicRtpPortRange1
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-form-item
|
||||
class="form-item-checked2"
|
||||
:name="['configuration', 'dynamicRtpPort']"
|
||||
>
|
||||
<div class="form-label"></div>
|
||||
<j-checkbox
|
||||
v-model:checked="
|
||||
formData.configuration.dynamicRtpPort
|
||||
"
|
||||
>
|
||||
动态端口
|
||||
</j-checkbox>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
|
||||
<j-col :span="24">
|
||||
<j-form-item>
|
||||
<j-button
|
||||
v-if="view === 'false'"
|
||||
html-type="submit"
|
||||
type="primary"
|
||||
@click.prevent="onSubmit"
|
||||
:loading="loading"
|
||||
>保存</j-button
|
||||
>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,143 +6,146 @@
|
|||
target="search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="CARD"
|
||||
:columns="columns"
|
||||
:gridColumn="2"
|
||||
:gridColumns="[1, 2]"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'id', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="media/Stream:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps)"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
@click="handlEye(slotProps.id)"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/stream.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<span
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
model="CARD"
|
||||
:columns="columns"
|
||||
:gridColumn="2"
|
||||
:gridColumns="[1, 2]"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'id', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="media/Stream:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="true"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps)"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
@click="handlEye(slotProps.id)"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/stream.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<Ellipsis
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 22px;
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col
|
||||
:span="8"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div class="card-item-content-text">
|
||||
服务商
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.provider
|
||||
}}</template>
|
||||
{{ slotProps.provider }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<div class="card-item-content-text">
|
||||
RTP IP
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.configuration
|
||||
?.rtpIp
|
||||
}}</template>
|
||||
{{
|
||||
slotProps.configuration
|
||||
?.rtpIp
|
||||
}}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<div class="card-item-content-text">
|
||||
API HOST
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.configuration
|
||||
?.apiHost
|
||||
}}</template>
|
||||
{{
|
||||
slotProps.configuration
|
||||
?.apiHost
|
||||
}}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'media/Stream:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<span
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 22px;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row class="card-item-content-box">
|
||||
<j-col
|
||||
:span="8"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div class="card-item-content-text">
|
||||
服务商
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.provider
|
||||
}}</template>
|
||||
{{ slotProps.provider }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<div class="card-item-content-text">
|
||||
RTP IP
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.configuration
|
||||
?.rtpIp
|
||||
}}</template>
|
||||
{{
|
||||
slotProps.configuration
|
||||
?.rtpIp
|
||||
}}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<div class="card-item-content-text">
|
||||
API HOST
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.configuration
|
||||
?.apiHost
|
||||
}}</template>
|
||||
{{
|
||||
slotProps.configuration
|
||||
?.apiHost
|
||||
}}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'media/Stream:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue