feat: 基站状态补充randId列
This commit is contained in:
@@ -875,6 +875,7 @@ export default {
|
||||
list: "List",
|
||||
topology: "Topology",
|
||||
nbName: "RAN Node Name",
|
||||
nbId: "RAN Node ID",
|
||||
ueNum: "UE Number",
|
||||
topologyTitle: "Radio State Graph",
|
||||
name: "Name",
|
||||
|
||||
@@ -875,6 +875,7 @@ export default {
|
||||
list: "列表",
|
||||
topology: "拓扑图",
|
||||
nbName: "设备名称",
|
||||
nbId: "设备ID",
|
||||
ueNum: "在线用户数",
|
||||
topologyTitle: "基站状态关系图",
|
||||
name: "基站名称",
|
||||
|
||||
@@ -150,6 +150,15 @@ let tableColumns = ref<ColumnsType>([
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title: t('views.neData.baseStation.nbId'),
|
||||
dataIndex: 'nbId',
|
||||
align: 'left',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title: t('views.neData.baseStation.state'),
|
||||
dataIndex: 'state',
|
||||
@@ -290,62 +299,43 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProModal
|
||||
:drag="true"
|
||||
:destroyOnClose="true"
|
||||
:width="1200"
|
||||
:title="props.title"
|
||||
:open="props.open"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
@cancel="fnModalCancel"
|
||||
:footer="null"
|
||||
>
|
||||
<ProModal :drag="true" :destroyOnClose="true" :width="1200" :title="props.title" :open="props.open" :keyboard="false"
|
||||
:mask-closable="false" @cancel="fnModalCancel" :footer="null">
|
||||
<!-- 表格搜索栏 -->
|
||||
<a-form :model="queryParams" name="queryParams" layout="horizontal">
|
||||
<a-row :gutter="16" style="margin-left: 0; margin-right: 0">
|
||||
<a-col :lg="6" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.neData.baseStation.state')"
|
||||
name="status"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="queryParams.status"
|
||||
allow-clear
|
||||
:placeholder="t('common.selectPlease')"
|
||||
:options="nbStateOptions"
|
||||
>
|
||||
<a-form-item :label="t('views.neData.baseStation.state')" name="status">
|
||||
<a-select v-model:value="queryParams.status" allow-clear :placeholder="t('common.selectPlease')"
|
||||
:options="nbStateOptions">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="16" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.neData.baseStation.time')"
|
||||
name="queryRangePicker"
|
||||
>
|
||||
<a-range-picker
|
||||
v-model:value="queryRangePicker"
|
||||
:bordered="true"
|
||||
:allow-clear="true"
|
||||
style="width: 100%"
|
||||
:show-time="{ format: 'HH:mm:ss' }"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
></a-range-picker>
|
||||
<a-form-item :label="t('views.neData.baseStation.time')" name="queryRangePicker">
|
||||
<a-range-picker v-model:value="queryRangePicker" :bordered="true" :allow-clear="true" style="width: 100%"
|
||||
:show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="24" :md="24" :xs="24">
|
||||
<a-form-item>
|
||||
<a-space :size="8">
|
||||
<a-button type="primary" @click.prevent="fnGetList(1)">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
<template #icon>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
{{ t('common.search') }}
|
||||
</a-button>
|
||||
<a-button type="default" @click.prevent="fnQueryReset">
|
||||
<template #icon><ClearOutlined /></template>
|
||||
<template #icon>
|
||||
<ClearOutlined />
|
||||
</template>
|
||||
{{ t('common.reset') }}
|
||||
</a-button>
|
||||
<a-button type="dashed" @click.prevent="fnExportList()">
|
||||
<template #icon><ExportOutlined /></template>
|
||||
<template #icon>
|
||||
<ExportOutlined />
|
||||
</template>
|
||||
{{ t('common.export') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
@@ -355,24 +345,13 @@ watch(
|
||||
</a-form>
|
||||
|
||||
<!-- 表格列表 -->
|
||||
<a-table
|
||||
class="table"
|
||||
row-key="id"
|
||||
:columns="tableColumns"
|
||||
:loading="tableState.loading"
|
||||
:data-source="tableState.data"
|
||||
:size="tableState.size"
|
||||
:pagination="tablePagination"
|
||||
<a-table class="table" row-key="id" :columns="tableColumns" :loading="tableState.loading"
|
||||
:data-source="tableState.data" :size="tableState.size" :pagination="tablePagination"
|
||||
:scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
|
||||
@resizeColumn="(w:number, col:any) => (col.width = w)"
|
||||
>
|
||||
@resizeColumn="(w: number, col: any) => (col.width = w)">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'state'">
|
||||
<DictTag
|
||||
:options="nbStateOptions"
|
||||
:value="record.state"
|
||||
value-default="OFF"
|
||||
/>
|
||||
<DictTag :options="nbStateOptions" :value="record.state" value-default="OFF" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
@@ -140,6 +140,12 @@ let tableColumns = ref<ColumnsType>([
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title: t('views.neData.baseStation.nbId'),
|
||||
dataIndex: 'ranId',
|
||||
align: 'left',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: t('views.neData.baseStation.ueNum'),
|
||||
dataIndex: 'ueNum',
|
||||
@@ -641,8 +647,7 @@ function fnModalImportUpload(file: File) {
|
||||
/**对话框表格信息导入模板 */
|
||||
async function fnModalImportTemplate() {
|
||||
const baseUrl = import.meta.env.VITE_HISTORY_BASE_URL;
|
||||
const xlsxUrl = `${
|
||||
baseUrl.length === 1 && baseUrl.indexOf('/') === 0
|
||||
const xlsxUrl = `${baseUrl.length === 1 && baseUrl.indexOf('/') === 0
|
||||
? ''
|
||||
: baseUrl.indexOf('/') === -1
|
||||
? '/' + baseUrl
|
||||
@@ -688,46 +693,35 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
|
||||
>
|
||||
<a-card :bordered="false" :body-style="{ marginBottom: '24px', paddingBottom: 0 }">
|
||||
<!-- 表格搜索栏 -->
|
||||
<a-form :model="queryParams" name="queryParams" layout="horizontal">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="6" :md="12" :xs="24">
|
||||
<a-form-item :label="t('views.ne.common.neType')" name="neType ">
|
||||
<a-cascader
|
||||
v-model:value="neTypeAndId"
|
||||
:options="neCascaderOptions"
|
||||
:allow-clear="false"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
@change="fnGetList"
|
||||
/>
|
||||
<a-cascader v-model:value="neTypeAndId" :options="neCascaderOptions" :allow-clear="false"
|
||||
:placeholder="t('common.selectPlease')" @change="fnGetList" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="4" :md="6" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.neData.baseStation.state')"
|
||||
name="state"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="queryParams.state"
|
||||
:options="nbState"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
@change="fnGetList"
|
||||
/>
|
||||
<a-form-item :label="t('views.neData.baseStation.state')" name="state">
|
||||
<a-select v-model:value="queryParams.state" :options="nbState" :placeholder="t('common.selectPlease')"
|
||||
@change="fnGetList" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :xs="24">
|
||||
<a-form-item>
|
||||
<a-space :size="8">
|
||||
<a-button type="primary" @click.prevent="fnGetList()">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
<template #icon>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
{{ t('common.search') }}
|
||||
</a-button>
|
||||
<a-button type="default" @click.prevent="fnQueryReset">
|
||||
<template #icon><ClearOutlined /></template>
|
||||
<template #icon>
|
||||
<ClearOutlined />
|
||||
</template>
|
||||
{{ t('common.reset') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
@@ -747,35 +741,36 @@ onMounted(() => {
|
||||
</template>
|
||||
{{ t('common.addText') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="default"
|
||||
:disabled="tableState.selectedRowKeys.length != 1"
|
||||
:loading="modalState.confirmLoading"
|
||||
@click.prevent="fnModalVisibleByEdit('0')"
|
||||
>
|
||||
<template #icon><FormOutlined /></template>
|
||||
<a-button type="default" :disabled="tableState.selectedRowKeys.length != 1"
|
||||
:loading="modalState.confirmLoading" @click.prevent="fnModalVisibleByEdit('0')">
|
||||
<template #icon>
|
||||
<FormOutlined />
|
||||
</template>
|
||||
{{ t('common.editText') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="default"
|
||||
danger
|
||||
:disabled="tableState.selectedRowKeys.length <= 0"
|
||||
:loading="modalState.confirmLoading"
|
||||
@click.prevent="fnRecordDelete('0')"
|
||||
>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
<a-button type="default" danger :disabled="tableState.selectedRowKeys.length <= 0"
|
||||
:loading="modalState.confirmLoading" @click.prevent="fnRecordDelete('0')">
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
{{ t('common.deleteText') }}
|
||||
</a-button>
|
||||
<a-button type="dashed" @click.prevent="fnModalImportOpen()">
|
||||
<template #icon><ImportOutlined /></template>
|
||||
<template #icon>
|
||||
<ImportOutlined />
|
||||
</template>
|
||||
{{ t('common.import') }}
|
||||
</a-button>
|
||||
<a-button type="dashed" @click.prevent="fnExportList()">
|
||||
<template #icon><ExportOutlined /></template>
|
||||
<template #icon>
|
||||
<ExportOutlined />
|
||||
</template>
|
||||
{{ t('common.export') }}
|
||||
</a-button>
|
||||
<a-button type="default" @click.prevent="fnHistoryView()">
|
||||
<template #icon><ContainerOutlined /></template>
|
||||
<template #icon>
|
||||
<ContainerOutlined />
|
||||
</template>
|
||||
{{ t('views.neData.baseStation.history') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
@@ -785,19 +780,15 @@ onMounted(() => {
|
||||
<template #extra>
|
||||
<a-space :size="8" align="center">
|
||||
<div>
|
||||
<template
|
||||
v-if="
|
||||
<template v-if="
|
||||
queryParams.state === undefined || queryParams.state === 'ON'
|
||||
"
|
||||
>
|
||||
">
|
||||
{{ t('views.neData.baseStation.online') }}:
|
||||
<strong style="color: green">{{ stateNum[0] }} </strong>
|
||||
</template>
|
||||
<template
|
||||
v-if="
|
||||
<template v-if="
|
||||
queryParams.state === undefined || queryParams.state === 'OFF'
|
||||
"
|
||||
>
|
||||
">
|
||||
|
||||
{{ t('views.neData.baseStation.offline') }}:
|
||||
<strong style="color: red">
|
||||
@@ -808,139 +799,72 @@ onMounted(() => {
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.reloadText') }}</template>
|
||||
<a-button type="text" @click.prevent="fnGetList()">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
<template #icon>
|
||||
<ReloadOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 表格列表 -->
|
||||
<a-table
|
||||
class="table"
|
||||
row-key="index"
|
||||
:columns="tableColumns"
|
||||
:loading="tableState.loading"
|
||||
:data-source="tableState.data"
|
||||
:size="tableState.size"
|
||||
:pagination="tablePagination"
|
||||
:row-selection="{
|
||||
<a-table class="table" row-key="index" :columns="tableColumns" :loading="tableState.loading"
|
||||
:data-source="tableState.data" :size="tableState.size" :pagination="tablePagination" :row-selection="{
|
||||
type: 'checkbox',
|
||||
selectedRowKeys: tableState.selectedRowKeys,
|
||||
onChange: fnTableSelectedRowKeys,
|
||||
}"
|
||||
:scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
|
||||
@resizeColumn="(w:number, col:any) => (col.width = w)"
|
||||
>
|
||||
}" :scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
|
||||
@resizeColumn="(w: number, col: any) => (col.width = w)">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'state'">
|
||||
<DictTag
|
||||
:options="nbState"
|
||||
:value="record.state"
|
||||
value-default="OFF"
|
||||
/>
|
||||
<DictTag :options="nbState" :value="record.state" value-default="OFF" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增框或修改框 -->
|
||||
<ProModal
|
||||
:drag="true"
|
||||
:width="500"
|
||||
:destroyOnClose="true"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:open="modalState.openByEdit"
|
||||
:title="modalState.title"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnModalOk"
|
||||
@cancel="fnModalCancel"
|
||||
>
|
||||
<a-form
|
||||
name="modalStateFrom"
|
||||
layout="horizontal"
|
||||
:label-col="{ span: 6 }"
|
||||
:labelWrap="true"
|
||||
>
|
||||
<a-form-item
|
||||
:label="t('views.neData.baseStation.name')"
|
||||
name="name"
|
||||
v-bind="modalStateFrom.validateInfos.name"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="modalState.from.name"
|
||||
allow-clear
|
||||
:maxlength="64"
|
||||
>
|
||||
<ProModal :drag="true" :width="500" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
|
||||
:open="modalState.openByEdit" :title="modalState.title" :confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnModalOk" @cancel="fnModalCancel">
|
||||
<a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }" :labelWrap="true">
|
||||
<a-form-item :label="t('views.neData.baseStation.name')" name="name" v-bind="modalStateFrom.validateInfos.name">
|
||||
<a-input v-model:value="modalState.from.name" allow-clear :maxlength="64">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="t('views.neData.baseStation.position')"
|
||||
name="position"
|
||||
v-bind="modalStateFrom.validateInfos.position"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="modalState.from.position"
|
||||
allow-clear
|
||||
:maxlength="64"
|
||||
>
|
||||
<a-form-item :label="t('views.neData.baseStation.position')" name="position"
|
||||
v-bind="modalStateFrom.validateInfos.position">
|
||||
<a-input v-model:value="modalState.from.position" allow-clear :maxlength="64">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="!modalState.from.state"
|
||||
:label="t('views.neData.baseStation.address')"
|
||||
name="address"
|
||||
v-bind="modalStateFrom.validateInfos.address"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="modalState.from.address"
|
||||
allow-clear
|
||||
:maxlength="64"
|
||||
>
|
||||
<a-form-item v-if="!modalState.from.state" :label="t('views.neData.baseStation.address')" name="address"
|
||||
v-bind="modalStateFrom.validateInfos.address">
|
||||
<a-input v-model:value="modalState.from.address" allow-clear :maxlength="64">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ProModal>
|
||||
|
||||
<!-- 状态历史框 -->
|
||||
<HistoryModal
|
||||
v-if="neTypeAndId.length > 1"
|
||||
v-model:open="modalState.openByHistory"
|
||||
:title="t('views.neData.baseStation.history')"
|
||||
:ne-type="neTypeAndId[0]"
|
||||
:ne-id="neTypeAndId[1]"
|
||||
@cancel="fnModalCancel"
|
||||
></HistoryModal>
|
||||
<HistoryModal v-if="neTypeAndId.length > 1" v-model:open="modalState.openByHistory"
|
||||
:title="t('views.neData.baseStation.history')" :ne-type="neTypeAndId[0]" :ne-id="neTypeAndId[1]"
|
||||
@cancel="fnModalCancel"></HistoryModal>
|
||||
|
||||
<!-- 上传导入表格数据文件框 -->
|
||||
<UploadModal
|
||||
:title="t('common.import')"
|
||||
@upload="fnModalImportUpload"
|
||||
@close="fnModalImportClose"
|
||||
v-model:open="modalState.openByImport"
|
||||
:ext="['.xls', '.xlsx']"
|
||||
:size="10"
|
||||
>
|
||||
<UploadModal :title="t('common.import')" @upload="fnModalImportUpload" @close="fnModalImportClose"
|
||||
v-model:open="modalState.openByImport" :ext="['.xls', '.xlsx']" :size="10">
|
||||
<template #default>
|
||||
<a-row justify="space-between" align="middle">
|
||||
<a-col :span="12"> </a-col>
|
||||
<a-col :span="6">
|
||||
<a-button
|
||||
type="link"
|
||||
:title="t('views.system.user.downloadObj')"
|
||||
@click.prevent="fnModalImportTemplate"
|
||||
>
|
||||
<a-button type="link" :title="t('views.system.user.downloadObj')" @click.prevent="fnModalImportTemplate">
|
||||
{{ t('views.system.user.downloadObj') }}
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-textarea
|
||||
:disabled="true"
|
||||
:hidden="modalState.importMsgArr.length <= 0"
|
||||
:value="modalState.importMsgArr.join('\r\n')"
|
||||
:auto-size="{ minRows: 2, maxRows: 8 }"
|
||||
style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
|
||||
/>
|
||||
<a-textarea :disabled="true" :hidden="modalState.importMsgArr.length <= 0"
|
||||
:value="modalState.importMsgArr.join('\r\n')" :auto-size="{ minRows: 2, maxRows: 8 }"
|
||||
style="background-color: transparent; color: rgba(0, 0, 0, 0.85)" />
|
||||
</template>
|
||||
</UploadModal>
|
||||
</div>
|
||||
|
||||
@@ -132,8 +132,7 @@ const graphNodeTooltip = new Tooltip({
|
||||
"
|
||||
>
|
||||
<div><strong>${t('views.neData.baseStation.state')}:</strong><span>
|
||||
${
|
||||
nInfo.state === 'ON'
|
||||
${nInfo.state === 'ON'
|
||||
? t('views.neData.baseStation.online')
|
||||
: t('views.neData.baseStation.offline')
|
||||
}
|
||||
@@ -147,6 +146,8 @@ const graphNodeTooltip = new Tooltip({
|
||||
${nInfo.address ?? '--'}</span></div>
|
||||
<div><strong>${t('views.neData.baseStation.nbName')}:</strong><span>
|
||||
${nInfo.nbName ?? '--'}</span></div>
|
||||
<div><strong>${t('views.neData.baseStation.nbId')}:</strong><span>
|
||||
${nInfo.ranId ?? '--'}</span></div>
|
||||
<div><strong>${t('views.neData.baseStation.ueNum')}:</strong><span>
|
||||
${nInfo.ueNum ?? '--'}</span></div>
|
||||
<div><strong>${t('views.neData.baseStation.name')}:</strong><span>
|
||||
@@ -169,8 +170,7 @@ const graphNodeTooltip = new Tooltip({
|
||||
"
|
||||
>
|
||||
<div><strong>${t('views.monitor.topology.state')}:</strong><span>
|
||||
${
|
||||
nInfo.online
|
||||
${nInfo.online
|
||||
? t('views.monitor.topology.normalcy')
|
||||
: t('views.monitor.topology.exceptions')
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user