Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
JiangQiming
commit
d53f487d2c
|
|
@ -211,7 +211,9 @@ const dateChange = (e: any) => {
|
|||
emit('change', e)
|
||||
}
|
||||
|
||||
myValue.value = props.modelValue
|
||||
watch(() => props.modelValue, () => {
|
||||
myValue.value = props.modelValue
|
||||
}, { immediate: true })
|
||||
|
||||
if (props.itemType === 'object') {
|
||||
objectValue.value = props.modelValue as string
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -28,11 +28,16 @@
|
|||
}}</j-descriptions-item>
|
||||
|
||||
<j-descriptions-item label="接入方式">
|
||||
<j-button type="link" @click="changeTables">{{
|
||||
productStore.current.accessName
|
||||
? productStore.current.accessName
|
||||
: '配置接入方式'
|
||||
}}</j-button>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="changeTables"
|
||||
hasPermission="device/Product:update"
|
||||
>{{
|
||||
productStore.current.accessName
|
||||
? productStore.current.accessName
|
||||
: '配置接入方式'
|
||||
}}</PermissionButton
|
||||
>
|
||||
</j-descriptions-item>
|
||||
<j-descriptions-item label="创建时间">{{
|
||||
dayjs(productStore.current.createTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
|
|
@ -55,6 +60,8 @@ import { useProductStore } from '@/store/product';
|
|||
import Save from '../../Save/index.vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
const menuSotre = useMenuStore();
|
||||
const productStore = useProductStore();
|
||||
const route = useRoute();
|
||||
const saveRef = ref();
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
target="iot-card-management-search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
:scroll="{ x: 1366 }"
|
||||
ref="cardManageRef"
|
||||
|
|
@ -372,6 +373,7 @@
|
|||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
<!-- 批量导入 -->
|
||||
<Import v-if="importVisible" @close="importVisible = false" @save="importSave"/>
|
||||
<!-- 批量导出 -->
|
||||
|
|
|
|||
|
|
@ -100,10 +100,11 @@
|
|||
@change="getTopRang"
|
||||
/></template>
|
||||
</Guide>
|
||||
<FullPage v-if="topList.length !== 0">
|
||||
<div
|
||||
v-if="topList.length !== 0"
|
||||
class="rankingList"
|
||||
style="min-height: 490px"
|
||||
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in topList"
|
||||
|
|
@ -135,6 +136,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FullPage>
|
||||
<div class="empty-body" v-else>
|
||||
<j-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,83 +2,85 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<pro-search :columns="columns" target="platform-search" @search="handleSearch" />
|
||||
<j-pro-table ref="platformRef" :columns="columns" :request="queryList"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }" :params="params" :gridColumn="3">
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<!-- <j-button type="primary" @click="handleAdd">
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</j-button> -->
|
||||
<PermissionButton @click="handleAdd" :hasPermission="'iot-card/Platform:add'" type="primary">
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox :value="slotProps" :actions="getActions(slotProps, 'card')" v-bind="slotProps"
|
||||
:status="slotProps.state.value" :statusText="slotProps.state.text" :statusNames="{
|
||||
enabled: 'success',
|
||||
disabled: 'error',
|
||||
}">
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/iot-card/iot-card-bg.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 style='font-size: 16px;width: calc(100% - 90px)'>
|
||||
<Ellipsis>
|
||||
{{ slotProps.name }}
|
||||
</Ellipsis>
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
平台类型
|
||||
</div>
|
||||
<div>{{ slotProps.operatorName }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">说明</div>
|
||||
<Ellipsis>{{ slotProps.explain }}</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton :disabled="item.disabled" :popConfirm="item.popConfirm" :tooltip="{
|
||||
...item.tooltip,
|
||||
}" @click="item.onClick" :hasPermission="'iot-card/Platform:' + 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="
|
||||
slotProps.state.value === 'disabled'
|
||||
? 'error'
|
||||
: 'success'
|
||||
" />
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template v-for="i in getActions(slotProps, 'table')" :key="i.key">
|
||||
<PermissionButton :disabled="i.disabled" :popConfirm="i.popConfirm" :tooltip="{
|
||||
...i.tooltip,
|
||||
}" @click="i.onClick" type="link" style="padding: 0px"
|
||||
:hasPermission="'iot-card/Platform:' + i.key">
|
||||
<template #icon>
|
||||
<AIcon :type="i.icon" />
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<FullPage>
|
||||
<j-pro-table ref="platformRef" :columns="columns" :request="queryList"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }" :params="params" :gridColumn="3">
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<!-- <j-button type="primary" @click="handleAdd">
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</j-button> -->
|
||||
<PermissionButton @click="handleAdd" :hasPermission="'iot-card/Platform:add'" type="primary">
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox :value="slotProps" :actions="getActions(slotProps, 'card')" v-bind="slotProps"
|
||||
:status="slotProps.state.value" :statusText="slotProps.state.text" :statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}">
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/iot-card/iot-card-bg.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 style='font-size: 16px;width: calc(100% - 90px)'>
|
||||
<Ellipsis>
|
||||
{{ slotProps.name }}
|
||||
</Ellipsis>
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
平台类型
|
||||
</div>
|
||||
<div>{{ slotProps.operatorName }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">说明</div>
|
||||
<Ellipsis>{{ slotProps.explain }}</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton :disabled="item.disabled" :popConfirm="item.popConfirm" :tooltip="{
|
||||
...item.tooltip,
|
||||
}" @click="item.onClick" :hasPermission="'iot-card/Platform:' + 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="
|
||||
slotProps.state.value === 'disabled'
|
||||
? 'error'
|
||||
: 'success'
|
||||
" />
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template v-for="i in getActions(slotProps, 'table')" :key="i.key">
|
||||
<PermissionButton :disabled="i.disabled" :popConfirm="i.popConfirm" :tooltip="{
|
||||
...i.tooltip,
|
||||
}" @click="i.onClick" type="link" style="padding: 0px"
|
||||
:hasPermission="'iot-card/Platform:' + i.key">
|
||||
<template #icon>
|
||||
<AIcon :type="i.icon" />
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<pro-search :columns="columns" target="recharge-search" @search="handleSearch" />
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="rechargeRef"
|
||||
:columns="columns"
|
||||
|
|
@ -62,6 +63,7 @@
|
|||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
<!-- 充值 -->
|
||||
<Save v-if="visible" @change="saveChange" />
|
||||
<Detail v-if="detailVisible" :data="current" @close="close" />
|
||||
|
|
|
|||
|
|
@ -6,29 +6,31 @@
|
|||
target="record-search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<j-pro-table
|
||||
ref="RecordRef"
|
||||
:columns="columns"
|
||||
:request="queryList"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'time', order: 'desc' }],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
:params="params"
|
||||
:model="'TABLE'"
|
||||
>
|
||||
<template #time="slotProps">
|
||||
{{
|
||||
slotProps.time
|
||||
? moment(slotProps.time).format('YYYY-MM-DD HH:mm:ss')
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="RecordRef"
|
||||
:columns="columns"
|
||||
:request="queryList"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'time', order: 'desc' }],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
:params="params"
|
||||
:model="'TABLE'"
|
||||
>
|
||||
<template #time="slotProps">
|
||||
{{
|
||||
slotProps.time
|
||||
? moment(slotProps.time).format('YYYY-MM-DD HH:mm:ss')
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -1,3 +1,13 @@
|
|||
export const ParserConfiguration = {
|
||||
delimited: '',
|
||||
lang: '',
|
||||
script: '',
|
||||
size: '',
|
||||
length: '4',
|
||||
offset: undefined,
|
||||
little: undefined,
|
||||
};
|
||||
|
||||
export const Configuration = {
|
||||
parserType: undefined,
|
||||
port: undefined,
|
||||
|
|
@ -14,15 +24,7 @@ export const Configuration = {
|
|||
certId: undefined,
|
||||
privateKeyAlias: '',
|
||||
clientId: '',
|
||||
parserConfiguration: {
|
||||
delimited: '',
|
||||
lang: '',
|
||||
script: '',
|
||||
size: '',
|
||||
length: '4',
|
||||
offset: undefined,
|
||||
little: undefined,
|
||||
},
|
||||
parserConfiguration: ParserConfiguration,
|
||||
};
|
||||
|
||||
export const FormStates = {
|
||||
|
|
@ -230,8 +232,7 @@ export const Rules = {
|
|||
],
|
||||
password: [
|
||||
{
|
||||
// required: true,
|
||||
required: false,
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -75,16 +75,18 @@ const formModel = reactive({
|
|||
functionData: props.functionParameters
|
||||
})
|
||||
|
||||
const handlePropertiesOptions = (propertiesItem: any) => {
|
||||
const _type = propertiesItem?.valueType.type
|
||||
const handlePropertiesOptions = (propertiesValueType: any) => {
|
||||
const _type = propertiesValueType?.type
|
||||
if (_type === 'boolean') {
|
||||
return [
|
||||
{ label: propertiesItem.valueType.falseText || '是', value: propertiesItem.valueType.falseValue || false },
|
||||
{ label: propertiesItem.valueType.trueText || '否', value: propertiesItem.valueType.trueValue || true },
|
||||
{ label: propertiesValueType?.falseText || '是', value: propertiesValueType?.falseValue || false },
|
||||
{ label: propertiesValueType?.trueText || '否', value: propertiesValueType?.trueValue || true },
|
||||
]
|
||||
} else if (_type === 'enum') {
|
||||
return propertiesValueType?.elements?.map((a: any) => ({ ...a, label: a.text }))
|
||||
}
|
||||
|
||||
return propertiesItem.valueType?.elements
|
||||
return propertiesValueType?.elements
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -95,14 +97,14 @@ const functionData = computed(() => {
|
|||
const arrCache = []
|
||||
|
||||
if (functionItem) {
|
||||
const properties = functionItem.valueType ? functionItem.valueType.properties : functionItem.inputs;
|
||||
const properties = functionItem.input?.properties || functionItem.inputs;
|
||||
for (const datum of properties) {
|
||||
arrCache.push({
|
||||
id: datum.id,
|
||||
name: datum.name,
|
||||
type: datum.valueType ? datum.valueType.type : '-',
|
||||
format: datum.valueType ? datum.valueType.format : undefined,
|
||||
options: handlePropertiesOptions(datum),
|
||||
type: datum.valueType?.type || '-',
|
||||
format: datum.valueType?.format || undefined,
|
||||
options: handlePropertiesOptions(datum.valueType),
|
||||
value: undefined,
|
||||
});
|
||||
}
|
||||
|
|
@ -113,12 +115,10 @@ const functionData = computed(() => {
|
|||
|
||||
const rules = [{
|
||||
validator(_: string, value: any) {
|
||||
console.log(value)
|
||||
if (!value?.length && functionData.value.length) {
|
||||
return Promise.reject('请输入功能值')
|
||||
} else {
|
||||
let hasValue = value.find((item: { name: string, value: any}) => item.value === undefined)
|
||||
console.log('hasValue', hasValue)
|
||||
if (hasValue) {
|
||||
const functionItem = functionData.value.find((item: any) => item.id === hasValue.name)
|
||||
return Promise.reject(functionItem?.name ? `请输入${functionItem?.name}值` : '请输入功能值')
|
||||
|
|
|
|||
|
|
@ -75,18 +75,32 @@ const callData = ref<Array<{ id: string, value: string | undefined }>>()
|
|||
const writeForm = ref()
|
||||
const _value = ref([])
|
||||
|
||||
const handleOptions = (item: any, type: string) => {
|
||||
if (type === 'enum') {
|
||||
return item.valueType.elements?.map((a: any) => ({ ...a, label: a.text }))
|
||||
} else if (type === 'boolean') {
|
||||
return [
|
||||
{ label: item.valueType.trueText, value: item.valueType.trueValue },
|
||||
{ label: item.valueType.falseText, value: item.valueType.falseValue },
|
||||
]
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
const callDataOptions = computed(() => {
|
||||
const _valueKeys = Object.keys(props.value)
|
||||
if (_valueKeys.length) {
|
||||
return _valueKeys.map(key => {
|
||||
const item: any = props.properties.find((p: any) => p.id === key)
|
||||
console.log(item, props.value, key)
|
||||
if (item) {
|
||||
const _options = handleOptions(item, item.valueType?.type)
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
type: item.valueType ? item.valueType.type : '-',
|
||||
format: item.valueType ? item.valueType.format : undefined,
|
||||
options: item.valueType ? item.valueType.element : undefined,
|
||||
options: _options,
|
||||
value: props.value[key]
|
||||
}
|
||||
}
|
||||
|
|
@ -96,7 +110,7 @@ const callDataOptions = computed(() => {
|
|||
type: '',
|
||||
format: undefined,
|
||||
options: undefined,
|
||||
value: props.value[key]
|
||||
value: undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<ValueItem
|
||||
v-model:modelValue='record.value'
|
||||
:itemType="record.type"
|
||||
:options="handleOptions(record)"
|
||||
:options="record.options"
|
||||
@change='valueChange'
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -87,17 +87,6 @@ const columns = [
|
|||
},
|
||||
]
|
||||
|
||||
const handleOptions = (record: any) => {
|
||||
switch(record.type) {
|
||||
case 'enum':
|
||||
return (record?.options?.elements || []).map((item: any) => ({ label: item.text, value: item.value }))
|
||||
case 'boolean':
|
||||
return record?.options
|
||||
default:
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
const valueChange = () => {
|
||||
const _value = dataSource.value.map(item => {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
<FullPage>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue